mirror of
https://github.com/0dayCTF/reverse-shell-generator.git
synced 2024-12-18 19:06:09 +00:00
css changes
This commit is contained in:
briskets
parent
29647c1cd2
commit
ccda2bb809
BIN
assets/ComicMono.ttf
Normal file
BIN
assets/ComicMono.ttf
Normal file
Binary file not shown.
@ -1,22 +1,62 @@
|
|||||||
[data-theme="dark"] {
|
.prompt-sign {
|
||||||
background-color: pink !important;
|
position: absolute;
|
||||||
|
top: 25px;
|
||||||
|
left: 40px;
|
||||||
|
pointer-events: none;
|
||||||
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] .bg-light {
|
.highlighted-parameter {
|
||||||
background-color: #333 !important;
|
color: #c0c0ba;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] .bg-white {
|
.highlighted-warning {
|
||||||
background-color: #000 !important;
|
color: red;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] .rainbow {
|
.custom-switch label {
|
||||||
font-family: 'Pacifico', cursive;
|
cursor: pointer;
|
||||||
text-shadow: 2px 2px 4px #000000;
|
user-select: none;
|
||||||
font-size:40px;
|
}
|
||||||
-webkit-animation: rainbow 5s infinite;
|
|
||||||
-ms-animation: rainbow 5s infinite;
|
_:-ms-fullscreen,
|
||||||
animation: rainbow 5s infinite;
|
:root body {
|
||||||
font-family: ComicMono;
|
/* IE11 */
|
||||||
src: url(ComicMono.ttf);
|
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;
|
||||||
}
|
}
|
||||||
|
|||||||
1
css/dark-mode.min.css
vendored
Normal file
1
css/dark-mode.min.css
vendored
Normal file
@ -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}
|
||||||
277
css/light-mode.css
Normal file
277
css/light-mode.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
1
css/light-mode.min.css
vendored
Normal file
1
css/light-mode.min.css
vendored
Normal file
@ -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}}
|
||||||
254
index.html
254
index.html
@ -10,226 +10,18 @@
|
|||||||
<script src="assets/jquery-3.5.1.slim.min.js"></script>
|
<script src="assets/jquery-3.5.1.slim.min.js"></script>
|
||||||
<script src="assets/popper-1.16.1.min.js"></script>
|
<script src="assets/popper-1.16.1.min.js"></script>
|
||||||
<script src="assets/bootstrap-4.5.2.min.js"></script>
|
<script src="assets/bootstrap-4.5.2.min.js"></script>
|
||||||
<link rel="stylesheet" href="css/dark-mode.css">
|
<link rel="stylesheet" href="css/dark-mode.min.css">
|
||||||
|
<link rel="stylesheet" href="css/light-mode.min.css">
|
||||||
<style>
|
|
||||||
@-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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.prompt-sign {
|
|
||||||
position: absolute;
|
|
||||||
top: 25px;
|
|
||||||
left: 40px;
|
|
||||||
pointer-events: none;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlighted-parameter {
|
|
||||||
color: #c0c0ba;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlighted-warning {
|
|
||||||
color: red;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: rgba(100, 50, 255, .8);
|
|
||||||
font-family: 'ComicMono';
|
|
||||||
color: #212121;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-black">
|
<body class="bg-black">
|
||||||
<div class="container d-flex flex-column vh-100">
|
<div class="container d-flex flex-column vh-100">
|
||||||
<div class="custom-control custom-switch float-right">
|
<div class="custom-control custom-switch float-right">
|
||||||
<input id="darkSwitch" type="checkbox" class="custom-control-input">
|
<input id="lightSwitch" type="checkbox" class="custom-control-input">
|
||||||
<label for="darkSwitch" class="custom-control-label small pr-2 pb-1" style="padding-top:2px"
|
<label for="lightSwitch" class="custom-control-label small pr-2 pb-1" style="padding-top:2px"
|
||||||
data-toggle="tooltip" title="Toggle Dark Mode">🌓
|
data-toggle="tooltip" title="Toggle Light Mode">Light Mode 🌓
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<script src="js/dark-mode-switch.min.js"></script>
|
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="mb-auto row justify-content-center mt-3 mb-5">
|
<div class="mb-auto row justify-content-center mt-3 mb-5">
|
||||||
@ -239,7 +31,7 @@
|
|||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<!-- Step 1 -->
|
<!-- Configuration -->
|
||||||
<div class="col-12 col-md-6 mb-4">
|
<div class="col-12 col-md-6 mb-4">
|
||||||
<div class="card shadow h-100">
|
<div class="card shadow h-100">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
@ -294,17 +86,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /Step 1 -->
|
<!-- /Configuration -->
|
||||||
|
|
||||||
<!-- Step 2 -->
|
<!-- Listener -->
|
||||||
<div class="col-12 col-md-6 mb-4">
|
<div class="col-12 col-md-6 mb-4">
|
||||||
<div class="card shadow h-100">
|
<div class="card shadow h-100">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
||||||
<!-- Advanced switch -->
|
<!-- Advanced switch -->
|
||||||
<div class="custom-control custom-switch float-right">
|
<div class="custom-control custom-switch float-right">
|
||||||
<input id="step2-advanced-switch" type="checkbox" class="custom-control-input" checked>
|
<input id="listener-advanced-switch" type="checkbox" class="custom-control-input" checked>
|
||||||
<label for="step2-advanced-switch" class="custom-control-label small pr-2 pb-1"
|
<label for="listener-advanced-switch" class="custom-control-label small pr-2 pb-1"
|
||||||
style="padding-top:2px" data-toggle="tooltip" title="Display advanced settings">
|
style="padding-top:2px" data-toggle="tooltip" title="Display advanced settings">
|
||||||
Advanced
|
Advanced
|
||||||
</label>
|
</label>
|
||||||
@ -317,14 +109,14 @@
|
|||||||
<!-- Command -->
|
<!-- Command -->
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-auto position-relative" style="min-width: 300px">
|
<div class="col-auto position-relative" style="min-width: 300px">
|
||||||
<pre class="prompt-sign">$</pre>
|
<pre class="prompt-sign">🚀</pre>
|
||||||
<pre id="listener-command" class="bg-dark border text-wrap text-break p-4 pl-5 mb-2"
|
<pre id="listener-command" class="bg-dark border text-wrap text-break p-4 pl-5 mb-2"
|
||||||
style="outline: none; font-size:1em;" contenteditable="true"></pre>
|
style="outline: none; font-size:1em;" contenteditable="true"></pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Advanced section-->
|
<!-- Advanced section-->
|
||||||
<form class="row justify-content-center collapse" id="step2-advanced">
|
<form class="row justify-content-center collapse" id="listener-advanced">
|
||||||
<label for="listener-selection" class="col-auto col-form-label">Type</label>
|
<label for="listener-selection" class="col-auto col-form-label">Type</label>
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<select class="custom-select" id="listener-selection">
|
<select class="custom-select" id="listener-selection">
|
||||||
@ -348,14 +140,14 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Step 3 -->
|
<!-- Reverse Shell -->
|
||||||
<div class="card shadow mb-5">
|
<div class="card shadow mb-5">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
||||||
<!-- Advanced switch -->
|
<!-- Advanced switch -->
|
||||||
<div class="custom-control custom-switch float-right">
|
<div class="custom-control custom-switch float-right">
|
||||||
<input id="step3-advanced-switch" type="checkbox" class="custom-control-input" checked>
|
<input id="revshell-advanced-switch" type="checkbox" class="custom-control-input" checked>
|
||||||
<label for="step3-advanced-switch" class="custom-control-label small pr-2 pb-1"
|
<label for="revshell-advanced-switch" class="custom-control-label small pr-2 pb-1"
|
||||||
style="padding-top:2px" data-toggle="tooltip" title="Display advanced settings">
|
style="padding-top:2px" data-toggle="tooltip" title="Display advanced settings">
|
||||||
Advanced
|
Advanced
|
||||||
</label>
|
</label>
|
||||||
@ -380,14 +172,14 @@
|
|||||||
<!-- Command -->
|
<!-- Command -->
|
||||||
<div class="row flex-grow-1">
|
<div class="row flex-grow-1">
|
||||||
<div class="col position-relative">
|
<div class="col position-relative">
|
||||||
<pre class="prompt-sign">$</pre>
|
<pre class="prompt-sign">🚀</pre>
|
||||||
<pre id="reverse-shell-command" class="bg-dark border text-wrap text-break p-4 pl-5"
|
<pre id="reverse-shell-command" class="bg-dark border text-wrap text-break p-4 pl-5"
|
||||||
style="outline: none; font-size:1em;" contenteditable="true"></pre>
|
style="outline: none; font-size:1em;" contenteditable="true"></pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Advanced section -->
|
<!-- Advanced section -->
|
||||||
<form class="row justify-content-center collapse" id="step3-advanced">
|
<form class="row justify-content-center collapse" id="revshell-advanced">
|
||||||
|
|
||||||
<!-- Shell -->
|
<!-- Shell -->
|
||||||
<div class="col-auto mr-3">
|
<div class="col-auto mr-3">
|
||||||
@ -443,7 +235,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /Step 3 -->
|
<!-- /Reverse Shell -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -636,8 +428,10 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
updateSwitchStates: function () {
|
updateSwitchStates: function () {
|
||||||
$('#step2-advanced').collapse($('#step2-advanced-switch').prop('checked') ? 'show' : 'hide')
|
$('#listener-advanced').collapse($('#listener-advanced-switch').prop('checked') ? 'show' :
|
||||||
$('#step3-advanced').collapse($('#step3-advanced-switch').prop('checked') ? 'show' : 'hide')
|
'hide')
|
||||||
|
$('#revshell-advanced').collapse($('#revshell-advanced-switch').prop('checked') ? 'show' :
|
||||||
|
'hide')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -652,7 +446,7 @@
|
|||||||
setLocalStorage(portInput, "port", "value");
|
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
|
setInterval(rsg.updateSwitchStates, 500) // fix switch changes in rapid succession
|
||||||
|
|
||||||
$('#copy-listener').on('click', function () {
|
$('#copy-listener').on('click', function () {
|
||||||
@ -762,6 +556,8 @@
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script src="js/light-mode-switch.min.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
1
js/dark-mode-switch.min.js
vendored
1
js/dark-mode-switch.min.js
vendored
@ -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()}))});
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
var darkSwitch = document.getElementById("darkSwitch");
|
var lightSwitch = document.getElementById("lightSwitch");
|
||||||
window.addEventListener("load", function () {
|
window.addEventListener("load", function () {
|
||||||
if (darkSwitch) {
|
if (lightSwitch) {
|
||||||
initTheme();
|
initTheme();
|
||||||
darkSwitch.addEventListener("change", function () {
|
lightSwitch.addEventListener("change", function () {
|
||||||
resetTheme();
|
resetTheme();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -14,33 +14,33 @@ window.addEventListener("load", function () {
|
|||||||
*
|
*
|
||||||
* Description: initTheme is a function that uses localStorage from JavaScript DOM,
|
* 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
|
* 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
|
* value. If it is the first time opening the page, or if the switch was off the
|
||||||
* 'data-theme' attribute will not be set.
|
* 'data-theme' attribute will not be set.
|
||||||
* @return {void}
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
function initTheme() {
|
function initTheme() {
|
||||||
var darkThemeSelected =
|
var lightThemeSelected =
|
||||||
localStorage.getItem("darkSwitch") !== null &&
|
localStorage.getItem("lightSwitch") !== null &&
|
||||||
localStorage.getItem("darkSwitch") === "dark";
|
localStorage.getItem("lightSwitch") === "light";
|
||||||
darkSwitch.checked = darkThemeSelected;
|
lightSwitch.checked = lightThemeSelected;
|
||||||
darkThemeSelected
|
lightThemeSelected
|
||||||
? document.body.setAttribute("data-theme", "dark")
|
? document.body.setAttribute("data-theme", "light")
|
||||||
: document.body.removeAttribute("data-theme");
|
: document.body.removeAttribute("data-theme");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Summary: resetTheme checks if the switch is 'on' or 'off' and if it is toggled
|
* 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.
|
* applied.
|
||||||
* @return {void}
|
* @return {void}
|
||||||
*/
|
*/
|
||||||
function resetTheme() {
|
function resetTheme() {
|
||||||
if (darkSwitch.checked) {
|
if (lightSwitch.checked) {
|
||||||
document.body.setAttribute("data-theme", "dark");
|
document.body.setAttribute("data-theme", "light");
|
||||||
localStorage.setItem("darkSwitch", "dark");
|
localStorage.setItem("lightSwitch", "light");
|
||||||
} else {
|
} else {
|
||||||
document.body.removeAttribute("data-theme");
|
document.body.removeAttribute("data-theme");
|
||||||
localStorage.removeItem("darkSwitch");
|
localStorage.removeItem("lightSwitch");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
1
js/light-mode-switch.min.js
vendored
Normal file
1
js/light-mode-switch.min.js
vendored
Normal file
@ -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()}))});
|
||||||
Loading…
Reference in New Issue
Block a user