Add HTTP headers checker and tests
This commit is contained in:
Keith Casko
+297
-111
@@ -18,12 +18,24 @@
|
||||
--danger: #ff6b73;
|
||||
}
|
||||
|
||||
/* Always respect the HTML hidden attribute. */
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
|
||||
background:
|
||||
radial-gradient(circle at top, #17253b 0%, var(--background) 42%);
|
||||
radial-gradient(
|
||||
circle at top,
|
||||
#17253b 0%,
|
||||
var(--background) 42%
|
||||
);
|
||||
|
||||
color: var(--text);
|
||||
|
||||
font-family:
|
||||
Inter,
|
||||
ui-sans-serif,
|
||||
@@ -39,24 +51,29 @@ input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Main page layout. */
|
||||
.page-shell {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
min-height: 100vh;
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
.tool-panel {
|
||||
/* Main site heading area. */
|
||||
.site-header {
|
||||
width: min(760px, 100%);
|
||||
padding: 32px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
background: rgba(17, 24, 39, 0.96);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
|
||||
color: var(--accent);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
@@ -65,26 +82,91 @@ input {
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 12px;
|
||||
|
||||
font-size: clamp(2rem, 5vw, 3.25rem);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 62ch;
|
||||
margin-bottom: 28px;
|
||||
margin-bottom: 0;
|
||||
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.uptime-form label {
|
||||
/* Tool navigation tabs. */
|
||||
.tool-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
|
||||
width: min(760px, 100%);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.tool-tab {
|
||||
padding: 10px 14px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
|
||||
background: #0d1523;
|
||||
color: var(--muted);
|
||||
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tool-tab:hover {
|
||||
background: var(--surface-light);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tool-tab.active {
|
||||
border-color: var(--accent);
|
||||
background: rgba(76, 166, 255, 0.12);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Shared tool panel layout. */
|
||||
.tool-panel {
|
||||
width: min(760px, 100%);
|
||||
padding: 32px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
|
||||
background: rgba(17, 24, 39, 0.96);
|
||||
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.tool-header h2 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.tool-description {
|
||||
margin-bottom: 24px;
|
||||
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Shared form styles. */
|
||||
.tool-form label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
@@ -97,29 +179,36 @@ h1 {
|
||||
input {
|
||||
min-width: 0;
|
||||
padding: 13px 14px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
|
||||
background: #0b1220;
|
||||
color: var(--text);
|
||||
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(76, 166, 255, 0.16);
|
||||
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(76, 166, 255, 0.16);
|
||||
}
|
||||
|
||||
button {
|
||||
button[type="submit"] {
|
||||
padding: 13px 18px;
|
||||
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
|
||||
background: var(--accent);
|
||||
color: #04101c;
|
||||
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button[type="submit"]:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
@@ -128,9 +217,11 @@ button:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* Loading, success, and error message area. */
|
||||
.status-message {
|
||||
min-height: 24px;
|
||||
margin: 18px 0 0;
|
||||
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@@ -138,11 +229,14 @@ button:disabled {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* Shared result panel. */
|
||||
.result-panel {
|
||||
margin-top: 24px;
|
||||
padding: 22px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
|
||||
background: var(--surface-light);
|
||||
}
|
||||
|
||||
@@ -151,17 +245,22 @@ button:disabled {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.result-heading h2 {
|
||||
.result-heading h3 {
|
||||
margin-bottom: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
/* Shared status badges. */
|
||||
.status-badge,
|
||||
.hostname-badge {
|
||||
padding: 5px 10px;
|
||||
|
||||
border-radius: 999px;
|
||||
|
||||
font-size: 0.82rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
@@ -176,39 +275,58 @@ button:disabled {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.hostname-badge {
|
||||
background: rgba(76, 166, 255, 0.12);
|
||||
color: var(--accent);
|
||||
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* Shared result grid. */
|
||||
.result-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.result-grid div {
|
||||
padding: 14px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
|
||||
background: #0d1523;
|
||||
}
|
||||
|
||||
.result-grid dt,
|
||||
.final-url-block span {
|
||||
.final-url-block span,
|
||||
.certificate-detail-block span {
|
||||
margin-bottom: 6px;
|
||||
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.result-grid dd {
|
||||
margin: 0;
|
||||
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* Final URL display. */
|
||||
.final-url-block {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
|
||||
margin-top: 14px;
|
||||
padding: 14px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
|
||||
background: #0d1523;
|
||||
}
|
||||
|
||||
@@ -217,78 +335,7 @@ button:disabled {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.tool-panel {
|
||||
padding: 24px 18px;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.site-header {
|
||||
width: min(760px, 100%);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.site-header h1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tool-tabs {
|
||||
display: flex;
|
||||
width: min(760px, 100%);
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.tool-tab {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: #0d1523;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tool-tab:hover {
|
||||
background: var(--surface-light);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tool-tab.active {
|
||||
border-color: var(--accent);
|
||||
background: rgba(76, 166, 255, 0.12);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.tool-header h2 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.tool-description {
|
||||
margin-bottom: 24px;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hostname-badge {
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(76, 166, 255, 0.12);
|
||||
color: var(--accent);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* DNS result styles. */
|
||||
.dns-records {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
@@ -297,6 +344,7 @@ button:disabled {
|
||||
.dns-record-group {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
|
||||
background: #0d1523;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -304,7 +352,9 @@ button:disabled {
|
||||
.dns-record-group h4 {
|
||||
margin: 0;
|
||||
padding: 11px 14px;
|
||||
|
||||
border-bottom: 1px solid var(--border);
|
||||
|
||||
color: var(--accent);
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.08em;
|
||||
@@ -323,39 +373,29 @@ button:disabled {
|
||||
.empty-record {
|
||||
margin: 0;
|
||||
padding: 12px 14px;
|
||||
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.dns-checked-at {
|
||||
margin: 14px 0 0;
|
||||
|
||||
color: var(--muted);
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.tool-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.tool-tab {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* SSL certificate result styles. */
|
||||
.certificate-detail-block {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
|
||||
margin-top: 14px;
|
||||
padding: 14px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #0d1523;
|
||||
}
|
||||
|
||||
.certificate-detail-block span {
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
background: #0d1523;
|
||||
}
|
||||
|
||||
.certificate-detail-block p {
|
||||
@@ -365,10 +405,12 @@ button:disabled {
|
||||
|
||||
.certificate-detail-block code {
|
||||
color: var(--accent);
|
||||
|
||||
font-family:
|
||||
"Cascadia Code",
|
||||
"Courier New",
|
||||
monospace;
|
||||
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: normal;
|
||||
@@ -378,13 +420,157 @@ button:disabled {
|
||||
border-color: rgba(255, 107, 115, 0.5);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
/* HTTP header result sections. */
|
||||
.headers-section {
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.headers-section h4 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.security-header-results,
|
||||
.all-header-results {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* One security header result card. */
|
||||
.security-header-item {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
|
||||
padding: 14px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
|
||||
background: #0d1523;
|
||||
}
|
||||
|
||||
.security-header-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.security-header-heading strong {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.security-header-purpose,
|
||||
.security-header-value {
|
||||
margin: 0;
|
||||
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.security-header-value code {
|
||||
color: var(--accent);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Present or missing security header badge. */
|
||||
.header-status {
|
||||
flex-shrink: 0;
|
||||
|
||||
padding: 4px 8px;
|
||||
|
||||
border-radius: 999px;
|
||||
|
||||
font-size: 0.76rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.header-status.present {
|
||||
background: rgba(73, 209, 125, 0.14);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.header-status.missing {
|
||||
background: rgba(255, 107, 115, 0.14);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* One raw response header row. */
|
||||
.response-header-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
|
||||
padding: 12px 14px;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
|
||||
background: #0d1523;
|
||||
}
|
||||
|
||||
.response-header-name {
|
||||
color: var(--accent);
|
||||
|
||||
font-family:
|
||||
"Cascadia Code",
|
||||
"Courier New",
|
||||
monospace;
|
||||
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.response-header-value {
|
||||
color: var(--text);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* Tablet layout. */
|
||||
@media (max-width: 780px) {
|
||||
.tool-tabs {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Always hide elements that use the HTML hidden attribute. */
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
/* Phone layout. */
|
||||
@media (max-width: 640px) {
|
||||
.page-shell {
|
||||
padding: 24px 14px;
|
||||
}
|
||||
|
||||
.tool-panel {
|
||||
padding: 24px 18px;
|
||||
}
|
||||
|
||||
.tool-tabs {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tool-tab {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.result-heading {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.response-header-item {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user