Skip to content

Commit 12954bf

Browse files
vizzdoomvizzdoom
committed
Refactoring checkboxes
1 parent 4bf50e2 commit 12954bf

File tree

2 files changed

+69
-79
lines changed

2 files changed

+69
-79
lines changed

‎sql-command-builder.html

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -57,33 +57,38 @@ <h1><a href="?">SQLMap Command Builder</a></h1>
5757
<div class="form-grid">
5858
<!-- -u -->
5959
<div class="form-group">
60-
<label class="form-label" for="url">TARGET URL<i tooltip="Target URL (e.g. http://127.0.0.1/vuln.php?id=1)">ⁱ</i></label>
60+
<label class="form-label" for="url">TARGET URL<i tooltip="Target URL to scan.">ⁱ</i></label>
6161
<label class="form-label" for="url"><u>-u</u></label>
6262
<input type="url" id="url" class="form-control" placeholder="https://127.0.0.1/page?id=1">
6363
</div>
6464
<!-- -d -->
6565
<div class="form-group">
66-
<label class="form-label" for="directDb">DATABASE CONNECTION STRING<em class="tooltip">Connection string for direct database connection</em><br/><span>-d</span></label>
66+
<label class="form-label" for="directDb">DATABASE CONNECTION STRING<i tooltip="Connection string for direct database connection.">ⁱ</i></label>
67+
<label class="form-label" for="directDb"><u>-d</u></label>
6768
<input type="text" id="directDb" class="form-control" placeholder="mysql://user:pass@host/db">
6869
</div>
6970
<!-- -g -->
70-
<div class="form-group" title="Process Google dork results as target URLs" for="googleDork">
71-
<label class="form-label">GOOGLE DORK FOR TARGETS<br/><span>-g</label></span>
71+
<div class="form-group">
72+
<label class="form-label" for="googleDork">GOOGLE DORK FOR TARGETS<i tooltip="Process Google dork results as target URLs.">ⁱ</i></label>
73+
<label class="form-label" for="googleDork"><u>-g</u></label>
7274
<input type="text" id="googleDork" class="form-control" placeholder="inurl:php?id=">
7375
</div>
7476
<!-- -m -->
75-
<div class="form-group" title="Scan multiple targets given in a textual file">
76-
<label class="form-label" for="targetsFile">FILE WITH TARGETS<br/><span>-m</span></label>
77+
<div class="form-group">
78+
<label class="form-label" for="targetsFile">FILE WITH TARGETS<i tooltip="Scan multiple targets given in a textual file.">ⁱ</i></label>
79+
<label class="form-label" for="targetsFile"><u>-m</u></label>
7780
<input type="text" id="targetsFile" class="form-control" placeholder="targets.txt">
7881
</div>
7982
<!-- -l -->
80-
<div class="form-group" title="Rather than providing a single target URL, it is possible to test and inject against HTTP requests proxied through Burp proxy.">
81-
<label class="form-label" for="burpFile">BURP FILE WITH HTTP REQUESTS<br/><span>-l</span></label>
83+
<div class="form-group">
84+
<label class="form-label" for="burpFile">BURP FILE WITH HTTP REQUESTS<i tooltip="Rather than providing a single target URL, it is possible to test and inject against HTTP requests proxied through Burp proxy.">ⁱ</i></label>
85+
<label class="form-label" for="burpFile"><u>-l</u></label>
8286
<input type="text" id="burpFile" class="form-control" placeholder="burp.txt">
8387
</div>
8488
<!-- --scope -->
85-
<div class="form-group" title="Rather than using all hosts parsed from provided logs with option -l, you can specify valid Python regular expression to be used for filtering desired ones.">
86-
<label class="form-label" for="burpFileScope">SCOPE FOR BURP PROXY FILE<br/><span>--scope</span></label>
89+
<div class="form-group" title="">
90+
<label class="form-label" for="burpFileScope">SCOPE FOR BURP PROXY FILE<i tooltip="Rather than using all hosts parsed from provided logs with option -l, you can specify valid Python regular expression to be used for filtering desired ones.">ⁱ</i></label>
91+
<label class="form-label" for="burpFileScope"><u>--scope</u></label>
8792
<input type="text" id="burpFileScope" class="form-control" placeholder="(www)?\.target\.(com|net|org)">
8893
</div>
8994
</div>
@@ -98,30 +103,33 @@ <h1><a href="?">SQLMap Command Builder</a></h1>
98103
<div class="form-grid">
99104
<h3>Connection Control</h3>
100105
<!-- --timeout -->
101-
<div class="form-group" title="Seconds to wait before timeout connection (default 30)">
102-
<label class="form-label" for="timeout">REQUEST TIMEOUT<br/><span>--timeout</span></label>
106+
<div class="form-group">
107+
<label class="form-label" for="timeout">REQUEST TIMEOUT<i tooltip="Seconds to wait before timeout connection.
108+
Default: 30 seconds">ⁱ</i></label>
109+
<label class="form-label" for="timeout"><u>--timeout</u></label>
103110
<input type="number" id="timeout" class="form-control" min="1" max="300" placeholder="10 (seconds)">
104111
</div>
105112
<!-- --delay -->
106-
<div class="form-group" title="Delay (in seconds) between each HTTP request">
107-
<label class="form-label" for="delay">DELAY BETWEEN REQUEST<br/><span>--delay</span></label>
113+
<div class="form-group">
114+
<label class="form-label" for="delay">DELAY BETWEEN REQUEST<i tooltip="Delay (in seconds) between each HTTP request">ⁱ</i></label>
115+
<label class="form-label" for="delay"><u>--delay</u></label>
108116
<input type="number" id="delay" class="form-control" min="0.01" step="0.01" placeholder="2.25 (seconds)">
109117
</div>
110118
<!-- --threads -->
111-
<div class="form-group" title="Max number of concurrent HTTP(s) requests (default 1, max 10)">
112-
<label class="form-label" for="threads">NUMBER OF CONCURRENT REQUESTS<br/><span>--threads</span></label>
119+
<div class="form-group">
120+
<label class="form-label" for="threads">NUMBER OF CONCURRENT REQUESTS<i tooltip="Max number of concurrent HTTP(s) requests.
121+
Default: 1 | Maximum: 10"> ⁱ </i></label>
122+
<label class="form-label" for="threads"><u>--threads</u></label>
113123
<input type="number" id="threads" class="form-control" min="1" max="10" placeholder="1">
114124
</div>
115125
<!-- SPACER -->
116126
<div></div>
117127
<!-- force-ssl -->
118-
<div class="form-group" title="In case that user wants to force usage of SSL/HTTPS requests toward the target, he can use this switch.
119-
This can be useful in cases when urls are being collected by using option --crawl or when Burp log is being provided with option -l.">
120-
<label class="form-label">FORCE USAGE OF HTTPS REQUESTS</label>
128+
<div class="form-group">
129+
<label class="checkbox-label" for="forceSsl">FORCE USAGE OF HTTPS REQUESTS</label>
121130
<label class="checkbox-label">
122-
<input type="checkbox" id="forceSsl">
123-
<span class="checkmark"></span>
124-
<span class="checkbox-label__text">--force-ssl</span>
131+
<input type="checkbox" id="forceSsl"><span class="checkmark"></span><u>--force-ssl</u><i tooltip="In case that user wants to force usage of SSL/HTTPS requests toward the target, he can use this switch.
132+
This can be alse useful in cases when urls are being collected by --crawl or when Burp log is being provided with option -l.">ⁱ</i>
125133
</label>
126134
</div>
127135
<!-- --keep-alive -->

‎style.css

Lines changed: 39 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
--hacker-secondary: #9bffaafa;
2727
--hacker-bg-dark: #0d1117;
2828
--hacker-bg-dark-opacity: #0a0c14ee;
29-
--hacker-surface: #141a23f8;
29+
/* --hacker-surface: #141a23f8; */
30+
--hacker-surface: #141d23;
3031
--hacker-border: #223d2b;
3132

3233

@@ -73,7 +74,7 @@
7374
--space-l: 16px;
7475
--space-xl: 22px;
7576
--space-2xl: 28px;
76-
--space-3xl: 32px;
77+
--space-3xl: 36px;
7778

7879
/* Border Radius */
7980
--radius-s: 6px;
@@ -273,7 +274,7 @@ body {
273274
background-attachment: fixed !important;
274275
background-position: center center !important;
275276
background-repeat: no-repeat !important;
276-
background: url('background.jpg');
277+
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url('background.jpg');
277278
}
278279

279280

@@ -461,18 +462,22 @@ pre code {
461462
user-select: none;
462463
color: var(--hacker-primary);
463464
font-weight: bold;
464-
margin-bottom: var(--space-xxs);
465+
margin-bottom: var(--space-xs);
465466
font-size: var(--font-size-s);
466-
letter-spacing: 0.7px;
467+
letter-spacing: 0.5px;
468+
line-height: 0.9;
467469
}
468470

469-
.form-label u, .checkbox-label u {
471+
.form-label u,
472+
.checkbox-label u {
470473
font-weight: normal;;
471474
color: var(--hacker-secondary);
472475
text-decoration: none;
473476
}
474477

475-
.form-label i {
478+
.form-label i,
479+
.checkbox-label i {
480+
min-width: 18px;
476481
position: relative;
477482
display: inline-block;
478483
margin-left: var(--space-xs);
@@ -481,20 +486,28 @@ pre code {
481486
color: var(--hacker-secondary);
482487
}
483488

484-
.form-label i:hover::after {
485-
color: var(--hacker-primary);
489+
.form-label i:hover,
490+
.checkbox-label i:hover {
491+
color: var(--color-primary)
492+
}
486493

494+
.form-label i:hover::after,
495+
.checkbox-label i:hover::after {
496+
color: var(--hacker-primary);
487497
}
488498

489-
.form-label i::before {
499+
.form-label i::before,
500+
.checkbox-label i::before {
490501
font-size: var(--font-size-s);
491502
font-weight: var(--font-weight-normal);
492503
color: var(--hacker-secondary);
493504
padding: var(--space-s);
494-
border: 1px solid var(--hacker-secondary);
495-
box-shadow: 8px 8px 0px 0px var(--hacker-primary);
505+
margin: var(--space-m) 0;
506+
border: 2px solid var(--hacker-secondary);
507+
/* box-shadow: 8px 8px 0px 0px var(--hacker-primary); */
496508
background: var(--hacker-bg-dark);
497509

510+
line-height: 1.15;
498511
position: absolute;
499512
bottom: calc(100% + var(--space-2xl));
500513
left: 50%;
@@ -512,18 +525,21 @@ pre code {
512525
z-index: 1000;
513526
}
514527

515-
.form-label i:hover::before {
528+
.form-label i:hover::before,
529+
.checkbox-label i:hover::before {
516530
display: block;
517531
opacity: 1;
518532
visibility: visible;
519533
}
520534

521-
.form-label [tooltip]::before {
535+
.form-label [tooltip]::before,
536+
.checkbox-label [tooltip]::before {
522537
content: attr(tooltip);
523538
white-space: pre-line;
524539
}
525540

526-
.form-label i:hover::before {
541+
.form-label i:hover::before,
542+
.checkbox-label i:hover::before {
527543
display: block;
528544
opacity: 1;
529545
visibility: visible;
@@ -829,23 +845,12 @@ select.form-control {
829845
cursor: pointer;
830846
color: var(--color-text);
831847
font-size: var(--font-size-s);
848+
font-weight: bold;
832849
position: relative;
833850
padding-left: var(--space-3xl);
834-
-webkit-user-select: none; /* Safari */
851+
-webkit-user-select: none;
835852
user-select: none;
836853
}
837-
/*.checkbox-label__text {
838-
margin: 0px 0 0 4px;
839-
}*/
840-
/*.checkbox-label {
841-
display: flex;
842-
align-items: center;
843-
cursor: pointer;
844-
color: var(--color-text);
845-
font-size: var(--font-size-s);
846-
position: relative;
847-
padding-left: var(--space-3xl);
848-
}*/
849854

850855
input, select, textarea {
851856
margin-top: var(--space-xs);
@@ -860,28 +865,17 @@ input, select, textarea {
860865
.checkmark {
861866
position: absolute;
862867
left: 0;
863-
top: 50%;
868+
top: 0%;
864869
transform: translateY(-50%);
865-
height: 22px;
866-
width: 22px;
870+
height: 25px;
871+
width: 25px;
867872
background-color: var(--hacker-bg-dark);
868873
border: 2px solid var(--hacker-border);
869874
border-radius: 3px;
870875
transition: all 0.3s ease;
871876
}
872-
/*.checkmark {
873-
position: absolute;
874-
left: 0;
875-
top: 50%;
876-
transform: translateY(-50%);
877-
height: 18px;
878-
width: 18px;
879-
background-color: var(--hacker-bg-dark);
880-
border: 2px solid var(--hacker-border);
881-
border-radius: 3px;
882-
transition: all 0.3s ease;
883-
}*/
884877

878+
.checkbox-label:hover ~ .checkbox-label .checkmark, /* FORCE USAGE OF HTTPS REQUESTS:hover -->> check */
885879
.checkbox-label:hover .checkmark {
886880
border-color: var(--hacker-primary);
887881
box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
@@ -897,26 +891,14 @@ input, select, textarea {
897891
content: "";
898892
position: absolute;
899893
display: none;
900-
left: 5px;
901-
top: 2px;
894+
left: 6px;
895+
top: 3px;
902896
width: 8px;
903897
height: 12px;
904898
border: solid var(--color-btn-primary-text);
905899
border-width: 0 2px 2px 0;
906900
transform: rotate(45deg);
907901
}
908-
/*.checkmark:after {
909-
content: "";
910-
position: absolute;
911-
display: none;
912-
left: 5px;
913-
top: 2px;
914-
width: 4px;
915-
height: 8px;
916-
border: solid var(--color-btn-primary-text);
917-
border-width: 0 2px 2px 0;
918-
transform: rotate(45deg);
919-
}*/
920902

921903
.checkbox-label input:checked ~ .checkmark:after {
922904
display: block;

0 commit comments

Comments
 (0)