Tooltips and refactoring

Author: vizzdoom

app.js

@@ -38,7 +38,7 @@ class SQLMapGenerator {
             '--random-agent': 'userAgent',
             '--mobile': 'mobileUserAgent',
             '--referer': 'referer',
-            '-H': 'headers',
+            '--headers': 'headers',
 
             '--cookie': 'cookie',
             '--cookie-del': 'cookieDel',
@@ -312,7 +312,7 @@ class SQLMapGenerator {
         }
 
         this.setStandardConfigItem(config, '--referer');  
-        this.setStandardConfigItem(config, '-H');  
+        this.setStandardConfigItem(config, '--headers');  
 
         // ## Authentication
         this.setStandardConfigItem(config, '--cookie'); 

sql-command-builder.html

@@ -317,9 +317,9 @@ <h3>Request Headers</h3>
                                 <label class="form-label" title="HTTP Referer header value" for="referer">HTTP REFERER HEADER<br/><span>--referer</span></label>
                                 <input type="url" id="referer" class="form-control" placeholder="https://127.0.0.1/login">
                             </div>
-                            <!-- -H -->
+                            <!-- -headers -->
                             <div class="form-group" title="Extra HTTP headers separated by a newline.">
-                                <label class="form-label" title="Additional HTTP Headers" for="headers">EXTRA HTTP HEADERS<br/><span>-H</span></label>
+                                <label class="form-label" title="Additional HTTP Headers" for="headers">EXTRA HTTP HEADERS<br/><span>--headers</span></label>
                                 <textarea id="headers" class="form-control" rows="4" placeholder="X-Forwarded-For: 127.0.0.1&#10;Authorization: Bearer token"></textarea>
                             </div>
                             <h3>Authentication</h3>
@@ -592,7 +592,7 @@ <h3>Attack Optimalization</h3>
 
                             <!-- Attack techniques -->
                             <div class="form-group">
-                                <label class="form-label" title="">ATTACK TECHNIQUES<br/><span>--technique</span></label>
+                                <label class="form-label">ATTACK TECHNIQUES<br/><span>--technique</span></label>
                                 <div class="checkbox-grid">
                                     <label class="checkbox-label">
                                         <input type="checkbox" id="techB" value="B">
@@ -627,8 +627,8 @@ <h3>Attack Optimalization</h3>
                                 </div>
                             </div>
                             <!-- Attack tuning -->
-                            <div class="form-group" title="Connection optimization - using persistent HTTP(s) connections">
-                                <label class="form-label">ATTACK TUNING</label>
+                            <div class="form-group">
+                                <label class="form-label" title="Connection optimization - using persistent HTTP(s) connections">ATTACK TUNING</label>
                                 <div class="checkbox-grid">
                                     <!-- --invalid-bignum -->
                                     <label class="checkbox-label" title="This parameter forces sqlmap to use large integer numbers for invalidating original parameter values during SQL injection tests.
@@ -758,8 +758,9 @@ <h3>Attack Optimalization</h3>
                                 <input type="text" id="sqlFile" class="form-control" placeholder="statements.sql">
                             </div>
                             <!-- ENUMERATION -->
-                            <div class="checkbox-grid" style="grid-row-start: 1; grid-row-end: 6;" title="These options can be used to enumerate the back-end database management system information, structure and data contained in the tables">
-                                <label class="form-label">ENUMERATION AND DATA EXFILTRATION</label>
+                            <div class="checkbox-grid" style="grid-row-start: 1; grid-row-end: 6;">
+                                <label class="form-label" title="These options can be used to enumerate the back-end database management system information, structure and data contained in the tables">
+                                    ENUMERATION AND DATA EXFILTRATION</label>
                                 <label class="checkbox-label" title="Retrieve everything">
                                     <input type="checkbox" id="all">
                                     <span class="checkmark"></span>

style.css

@@ -25,6 +25,7 @@
   --hacker-primary: #00f83e;
   --hacker-secondary: #9bffaafa;
   --hacker-bg-dark: #0d1117;
+  --hacker-bg-dark-opacity: #0a0c14ee;
   --hacker-surface: #141a23f8;
   --hacker-border: #223d2b;
 
@@ -582,92 +583,6 @@ select.form-control {
     rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
 }
 
-
-
-/* Utility classes */
-.flex {
-  display: flex;
-}
-.flex-col {
-  flex-direction: column;
-}
-.items-center {
-  align-items: center;
-}
-.justify-center {
-  justify-content: center;
-}
-.justify-between {
-  justify-content: space-between;
-}
-.gap-4 {
-  gap: var(--space-xs);
-}
-.gap-8 {
-  gap: var(--space-s);
-}
-.gap-16 {
-  gap: var(--space-l);
-}
-
-.m-0 {
-  margin: 0;
-}
-.mt-8 {
-  margin-top: var(--space-s);
-}
-.mb-8 {
-  margin-bottom: var(--space-s);
-}
-.mx-8 {
-  margin-left: var(--space-s);
-  margin-right: var(--space-s);
-}
-.my-8 {
-  margin-top: var(--space-s);
-  margin-bottom: var(--space-s);
-}
-
-.p-0 {
-  padding: 0;
-}
-.py-8 {
-  padding-top: var(--space-s);
-  padding-bottom: var(--space-s);
-}
-.px-8 {
-  padding-left: var(--space-s);
-  padding-right: var(--space-s);
-}
-.py-16 {
-  padding-top: var(--space-l);
-  padding-bottom: var(--space-l);
-}
-.px-16 {
-  padding-left: var(--space-l);
-  padding-right: var(--space-l);
-}
-
-.block {
-  display: block;
-}
-.hidden {
-  display: none;
-}
-
-/* Accessibility */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 :focus-visible {
   outline: var(--focus-outline);
   outline-offset: 2px;
@@ -687,7 +602,7 @@ select.form-control {
   margin-bottom: var(--space-3xl);
   position: sticky;
   top: 8px;
-  z-index: 9999999;
+  z-index: 900;
 }
 
 .command-header {
@@ -732,55 +647,6 @@ select.form-control {
   word-break: break-all;
 }
 
-/* Templates Section */
-.templates-section {
-  margin-bottom: var(--space-3xl);
-}
-
-.templates-section h3 {
-  color: var(--hacker-primary);
-  margin-bottom: var(--space-l);
-  font-size: var(--font-size-xl);
-}
-
-.templates-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: var(--space-l);
-}
-
-.template-btn {
-  background: var(--hacker-surface);
-  border: 1px solid var(--hacker-border);
-  border-radius: var(--radius-l);
-  padding: var(--space-l);
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  display: flex;
-  flex-direction: column;
-}
-
-.template-btn:hover {
-  border-color: var(--hacker-primary);
-  box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
-  transform: translateY(-2px);
-}
-
-.template-btn strong {
-  color: var(--hacker-primary);
-  font-size: var(--font-size-l);
-  margin-bottom: var(--space-s);
-}
-
-.template-btn span {
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-s);
-}
-
-.tab-btn:hover {
-  color: var(--hacker-primary);
-}
 
 /** NAV TABS */
 .tab-btn.active {
@@ -825,12 +691,6 @@ select.form-control {
   box-shadow: var(--shadow-m);
 }
 
-.card__header,
-.card__footer {
-  padding: var(--space-l);
-  border-bottom: 1px solid var(--color-card-border-inner);
-}
-
 .card__body {
   padding: var(--space-2xl);
 }
@@ -1079,53 +939,73 @@ select.form-control {
   color: #ffe66d;
 }
 
+.additional-help {
+  font-size: var(--font-size-s);
+  color: var(--color-text-secondary);
+  margin-top: var(--space-l);
+  line-height: 1.5;
+  height: 3em;
+  user-select: none;
+}
+
+.row-expand {
+  grid-column: 1 / -1;
+}
+
+/* Hide unstylled arrows from input type number */
+input[type=number] { 
+  -moz-appearance: textfield;
+  appearance: textfield;
+  margin: 0; 
+}
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button { 
+      -webkit-appearance: none; 
+      margin: 0; 
+}
+
 /* Tooltip styles */
-.tooltip {
+.tooltip,
+[title] {
   position: relative;
-  display: inline-block;
+
 }
 
-.tooltip::after {
-  content: attr(data-tooltip);
+.tooltip::after,
+[title]::after {
   position: absolute;
-  bottom: 125%;
+  bottom: calc(100% + var(--space-xs));
   left: 50%;
   transform: translateX(-50%);
-  background: var(--hacker-bg-dark);
-  color: var(--hacker-primary);
+  background: var(--hacker-bg-dark-opacity);
+  color: var(--hacker-secondary);
   padding: var(--space-s);
   border-radius: var(--radius-m);
   font-size: var(--font-size-xs);
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: break-word;
+  width: max-content;
+  max-width: min(30rem, calc(100vw - 2rem));
+  box-sizing: border-box;
   opacity: 0;
   visibility: hidden;
-  transition: all 0.3s ease;
+  display: none;
+  transition: opacity 0.3s ease;
   border: 1px solid var(--hacker-border);
   z-index: 1000;
 }
 
-.tooltip:hover::after {
-  opacity: 1;
-  visibility: visible;
-}
-
-.additional-help {
-  font-size: var(--font-size-s);
-  color: var(--color-text-secondary);
-  margin-top: var(--space-l);
-  line-height: 1.5;
-  height: 3em;
-  user-select: none;
-}
-
-.tamper--script {
-    font-weight: bold;
+.tooltip::after {
+  content: attr(data-tooltip);
 }
 
-.tamper--help {
-    padding-left: 20px;
+[title]::after {
+  content: attr(title);
 }
 
-.row-expand {
-  grid-column: 1 / -1;
+.tooltip:hover::after,
+[title]:hover::after {
+  display: block;
+  opacity: 1;
+  visibility: visible;
 }