-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
42 lines (35 loc) · 18.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Spruce Reporter</title><style>/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;block-size:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-inline-size:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{block-size:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spruce-alert-color-danger:hsl(0, 71%, 51%);--spruce-alert-color-info:hsl(195, 100%, 42%);--spruce-alert-color-success:hsl(150, 100%, 33%);--spruce-alert-color-warning:hsl(48, 89%, 55%)}:root{--spruce-base-color-background:hsl(0, 0%, 100%);--spruce-base-color-blockquote-border:hsl(262, 71%, 49%);--spruce-base-color-border:hsl(215, 63%, 93%);--spruce-base-color-code-background:#f6f2fd;--spruce-base-color-code-foreground:hsl(205, 100%, 2%);--spruce-base-color-heading:hsl(205, 100%, 2%);--spruce-base-color-link:hsl(262, 71%, 49%);--spruce-base-color-link-hover:#511dab;--spruce-base-color-mark-background:hsl(50, 100%, 80%);--spruce-base-color-mark-foreground:hsl(205, 100%, 2%);--spruce-base-color-marker:hsl(262, 71%, 49%);--spruce-base-color-primary:hsl(262, 71%, 49%);--spruce-base-color-secondary:hsl(227, 92%, 55%);--spruce-base-color-text:hsl(208, 9%, 42%)}:root{--spruce-btn-color-primary-background:hsl(262, 71%, 49%);--spruce-btn-color-primary-background-hover:#511daa;--spruce-btn-color-primary-foreground:hsl(0, 0%, 100%);--spruce-btn-color-primary-shadow:#ceb9f3;--spruce-btn-color-secondary-background:hsl(227, 92%, 55%);--spruce-btn-color-secondary-background-hover:#0937dc;--spruce-btn-color-secondary-foreground:hsl(0, 0%, 100%);--spruce-btn-color-secondary-shadow:#ced8fd;--spruce-btn-color-pagination-background:hsl(263, 40%, 96%);--spruce-btn-color-pagination-background-hover:hsl(262, 71%, 49%);--spruce-btn-color-pagination-focus-ring:hsl(262, 71%, 49%);--spruce-btn-color-pagination-foreground:hsl(262, 71%, 49%);--spruce-btn-color-pagination-foreground-hover:hsl(0, 0%, 100%)}:root{--spruce-form-color-background:hsl(0, 0%, 100%);--spruce-form-color-background-disabled:hsl(0, 0%, 95%);--spruce-form-color-border:hsl(260, 4%, 70%);--spruce-form-color-border-disabled:hsl(215, 63%, 93%);--spruce-form-color-border-focus:hsl(262, 71%, 49%);--spruce-form-color-check-background:hsl(262, 71%, 49%);--spruce-form-color-check-focus-ring:hsl(262, 71%, 49%);--spruce-form-color-check-foreground:hsl(0, 0%, 100%);--spruce-form-color-group-label-background:hsl(210, 60%, 98%);--spruce-form-color-group-label-foreground:hsl(208, 9%, 42%);--spruce-form-color-invalid:hsl(0, 71%, 51%);--spruce-form-color-invalid-focus-ring:rgba(219, 41, 41, 0.25);--spruce-form-color-label:hsl(205, 100%, 2%);--spruce-form-color-legend:hsl(205, 100%, 2%);--spruce-form-color-placeholder:hsl(208, 7%, 40%);--spruce-form-color-range-thumb-background:hsl(262, 71%, 49%);--spruce-form-color-range-thumb-focus-ring:hsl(262, 71%, 49%);--spruce-form-color-range-track-background:hsl(215, 63%, 93%);--spruce-form-color-ring-focus:rgba(101, 36, 214, 0.25);--spruce-form-color-select-foreground:hsl(205, 100%, 2%);--spruce-form-color-text:hsl(208, 9%, 42%);--spruce-form-color-valid:hsl(150, 100%, 33%);--spruce-form-color-valid-focus-ring:rgba(0, 168, 84, 0.25)}:root{--spruce-selection-color-foreground:hsl(0, 0%, 100%);--spruce-selection-color-background:hsl(262, 71%, 49%)}:root{--spruce-scrollbar-color-thumb-background:hsla(0, 0%, 0%, 0.15);--spruce-scrollbar-color-thumb-background-hover:hsla(0, 0%, 0%, 0.25);--spruce-scrollbar-color-track-background:hsla(0, 0%, 0%, 0.05)}:root{--spruce-table-color-border:hsl(215, 63%, 93%);--spruce-table-color-caption:hsl(208, 9%, 42%);--spruce-table-color-heading:hsl(205, 100%, 2%);--spruce-table-color-hover:hsla(0, 0%, 0%, 0.05);--spruce-table-color-stripe:hsla(0, 0%, 0%, 0.025);--spruce-table-color-text:hsl(208, 9%, 42%)}:root{--spruce-navigation-color-arrow:hsla(0, 0%, 0%, 0.15)}:root{--spruce-prism-color-color:hsl(243, 14%, 29%);--spruce-prism-color-background:hsl(0, 0%, 98%);--spruce-prism-color-comment:hsl(225, 14%, 46%);--spruce-prism-color-punctuation:hsl(279, 50%, 53%);--spruce-prism-color-namespace:hsl(173, 100%, 24%);--spruce-prism-color-deleted:hsla(1, 83%, 63%, 0.56);--spruce-prism-color-boolean:hsl(0, 44%, 53%);--spruce-prism-color-number:hsl(315, 90%, 35%);--spruce-prism-color-constant:hsl(221, 57%, 52%);--spruce-prism-color-class-name:hsl(0, 0%, 7%);--spruce-prism-color-regex:hsl(1, 48%, 59%)}@media(prefers-reduced-motion:no-preference){:root{--spruce-duration:0.15s;--spruce-timing-function:ease-in-out}}::selection{background-color:var(--spruce-selection-color-background);color:var(--spruce-selection-color-foreground);text-shadow:none}html{box-sizing:border-box}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}*,::after,::before{box-sizing:inherit}body{background:var(--spruce-base-color-background);color:var(--spruce-base-color-text)}a{color:var(--spruce-base-color-link);text-decoration:underline;transition-duration:var(--spruce-duration);transition-property:color;transition-timing-function:var(--spruce-timing-function)}a:hover{color:var(--spruce-base-color-link-hover)}button{color:inherit}a,button{touch-action:manipulation}html{-webkit-tap-highlight-color:transparent}body{font-family:Open Sans,sans-serif;font-size:1rem;line-height:1.8}h1,h2,h3,h4,h5,h6,li,p{hyphens:auto;overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{color:var(--spruce-base-color-heading);font-family:Manrope,sans-serif;font-weight:700;line-height:calc(2px + 2ex + 2px)}h1{font-size:clamp(2.0751953125rem,2vw + 1rem,2.44140625rem)}h2{font-size:clamp(1.66015625rem,2vw + 1rem,1.953125rem)}h3{font-size:clamp(1.328125rem,2vw + 1rem,1.5625rem)}h4{font-size:clamp(1.0625rem,2vw + 1rem,1.25rem)}h5{font-size:1rem}h6{font-size:1rem}ol,ul{list-style-position:inside}ol>*,ul>*{margin-block-end:0;margin-block-start:0}ol>*+*,ul>*+*{margin-block-start:.25rem}ol li,ul li{list-style-position:outside}ol li::marker,ul li::marker{color:var(--spruce-base-color-marker)}li>ol,li>ul{margin-block-start:.25rem}dl dt{color:var(--spruce-base-color-heading);font-weight:700}dl dd{margin:0}dl dd+dt{margin-block-start:1rem}.quote{border-inline-start:.5rem solid var(--spruce-base-color-blockquote-border);padding-inline-start:1.5rem}.quote>*{margin-block-end:0;margin-block-start:0}.quote>*+*{margin-block-start:.5rem}.quote blockquote{border-inline-start:0;padding-inline-start:0}.quote figcaption{text-align:start}blockquote{border-inline-start:.5rem solid var(--spruce-base-color-blockquote-border);margin-inline-start:0;padding-inline-start:1.5rem}blockquote>*{margin-block-end:0;margin-block-start:0}blockquote>*+*{margin-block-start:.5rem}abbr[title]{border-block-end:1px dotted;cursor:help;text-decoration:none}mark{background-color:var(--spruce-base-color-mark-background);border-radius:.325rem;color:var(--spruce-base-color-mark-foreground);padding:.1em .3em}code,kbd,samp{background-color:var(--spruce-base-color-code-background);border-radius:.325rem;color:var(--spruce-base-color-code-foreground);padding:.1em .3em}.lead{font-size:clamp(1.15rem,2vw,1.35rem)}.btn{align-items:center;border-radius:.325rem;border-style:solid;border-width:1px;cursor:pointer;display:inline-flex;font-family:Manrope,sans-serif;font-size:1rem;font-weight:600;gap:.5rem;justify-content:center;line-height:1;padding:.75em 1em;text-align:start;text-decoration:none;transition-duration:var(--spruce-duration);transition-property:background-color,border-color,box-shadow,color;transition-timing-function:var(--spruce-timing-function)}.btn:focus{outline-color:transparent;outline-style:solid}.btn:disabled{opacity:.5;pointer-events:none}.btn--icon{padding:.75em}.btn--icon.btn--sm{padding:.5em}.btn--icon.btn--lg{padding:.9em}.btn__icon{block-size:1em;flex-shrink:0;inline-size:1em;pointer-events:none}.btn__icon--sm{block-size:.8rem;inline-size:.8rem}.btn--sm{font-size:.8rem;gap:.25rem;padding:.5em .75em}.btn--lg{gap:.5rem;padding:.9em 1.15em}@media(min-width:64em){.btn--lg{font-size:1.15rem}}.btn--block{inline-size:100%}.btn--primary{background-color:var(--spruce-btn-color-primary-background);border-color:var(--spruce-btn-color-primary-background);color:var(--spruce-btn-color-primary-foreground)}.btn--primary:focus-visible{outline:2px solid var(--spruce-btn-color-primary-background);outline-offset:2px}.btn--primary:hover{background-color:var(--spruce-btn-color-primary-background-hover);border-color:var(--spruce-btn-color-primary-background-hover);color:var(--spruce-btn-color-primary-foreground)}.btn--primary-shadow{box-shadow:0 .55em 1em -.2em var(--spruce-btn-color-primary-shadow),0 .15em .35em -.185em var(--spruce-btn-color-primary-shadow)}.btn--secondary{background-color:var(--spruce-btn-color-secondary-background);border-color:var(--spruce-btn-color-secondary-background);color:var(--spruce-btn-color-secondary-foreground)}.btn--secondary:focus-visible{outline:2px solid var(--spruce-btn-color-secondary-background);outline-offset:2px}.btn--secondary:hover{background-color:var(--spruce-btn-color-secondary-background-hover);border-color:var(--spruce-btn-color-secondary-background-hover);color:var(--spruce-btn-color-secondary-foreground)}.btn--secondary-shadow{box-shadow:0 .55em 1em -.2em var(--spruce-btn-color-secondary-shadow),0 .15em .35em -.185em var(--spruce-btn-color-secondary-shadow)}.btn--outline-primary{background-color:rgba(0,0,0,0);border-color:var(--spruce-btn-color-primary-background);color:var(--spruce-btn-color-primary-background)}.btn--outline-primary:focus-visible{outline:2px solid var(--spruce-btn-color-primary-background);outline-offset:2px}.btn--outline-primary:hover{background-color:var(--spruce-btn-color-primary-background);border-color:var(--spruce-btn-color-primary-background);color:var(--spruce-btn-color-primary-foreground)}.btn--outline-secondary{background-color:rgba(0,0,0,0);border-color:var(--spruce-btn-color-secondary-background);color:var(--spruce-btn-color-secondary-background)}.btn--outline-secondary:focus-visible{outline:2px solid var(--spruce-btn-color-secondary-background);outline-offset:2px}.btn--outline-secondary:hover{background-color:var(--spruce-btn-color-secondary-background);border-color:var(--spruce-btn-color-secondary-background);color:var(--spruce-btn-color-secondary-foreground)}.form-group-label{align-items:center;background-color:var(--spruce-form-color-group-label-background);border:1px solid var(--spruce-form-color-border);border-radius:.325rem;color:var(--spruce-form-color-group-label-foreground);display:flex;padding-inline:1rem}@media(prefers-color-scheme:dark){:root{color-scheme:dark}:root{--spruce-base-color-background:hsl(206, 100%, 7%);--spruce-base-color-blockquote-border:hsl(261, 54%, 70%);--spruce-base-color-border:hsla(0, 0%, 100%, 0.08);--spruce-base-color-code-background:hsl(207, 64%, 18%);--spruce-base-color-code-foreground:hsl(0, 0%, 95%);--spruce-base-color-heading:hsl(0, 0%, 95%);--spruce-base-color-link:hsl(261, 54%, 70%);--spruce-base-color-link-hover:#b8a1e3;--spruce-base-color-mark-background:hsl(50, 100%, 80%);--spruce-base-color-mark-foreground:hsl(206, 100%, 7%);--spruce-base-color-marker:hsl(261, 54%, 70%);--spruce-base-color-primary:hsl(261, 54%, 70%);--spruce-base-color-secondary:hsl(227, 92%, 55%);--spruce-base-color-text:hsl(0, 0%, 90%)}:root{--spruce-btn-color-pagination-background:hsl(206, 100%, 12%);--spruce-btn-color-pagination-background-hover:hsl(261, 54%, 70%);--spruce-btn-color-pagination-focus-ring:hsl(261, 54%, 70%);--spruce-btn-color-pagination-foreground:hsl(0, 0%, 95%);--spruce-btn-color-pagination-foreground-hover:hsl(0, 0%, 95%);--spruce-btn-color-primary-background:hsl(261, 52%, 59%);--spruce-btn-color-primary-background-hover:hsl(261, 52%, 65%);--spruce-btn-color-primary-foreground:hsl(0, 0%, 95%);--spruce-btn-color-primary-shadow:#6035b1;--spruce-btn-color-secondary-background:hsl(227, 92%, 55%);--spruce-btn-color-secondary-background-hover:#3b64f7;--spruce-btn-color-secondary-foreground:hsl(0, 0%, 95%);--spruce-btn-color-secondary-shadow:#072bab}:root{--spruce-form-color-background:#00223b;--spruce-form-color-background-disabled:hsl(206, 100%, 7%);--spruce-form-color-border:hsla(0, 0%, 100%, 0.08);--spruce-form-color-border-disabled:hsla(0, 0%, 100%, 0.08);--spruce-form-color-border-focus:hsl(261, 54%, 70%);--spruce-form-color-check-background:hsl(261, 54%, 70%);--spruce-form-color-check-focus-ring:hsl(261, 54%, 70%);--spruce-form-color-check-foreground:hsl(206, 100%, 7%);--spruce-form-color-invalid:hsl(0, 71%, 51%);--spruce-form-color-invalid-focus-ring:rgba(219, 41, 41, 0.25);--spruce-form-color-label:hsl(0, 0%, 95%);--spruce-form-color-legend:hsl(0, 0%, 95%);--spruce-form-color-placeholder:hsl(0, 0%, 60%);--spruce-form-color-range-thumb-background:hsl(261, 54%, 70%);--spruce-form-color-range-thumb-focus-ring:hsl(261, 54%, 70%);--spruce-form-color-range-track-background:hsla(0, 0%, 100%, 0.08);--spruce-form-color-ring-focus:rgba(166, 137, 220, 0.25);--spruce-form-color-select-foreground:hsl(0, 0%, 100%);--spruce-form-color-text:hsl(0, 0%, 90%);--spruce-form-color-valid:hsl(150, 100%, 33%);--spruce-form-color-valid-focus-ring:rgba(0, 168, 84, 0.25)}:root{--spruce-navigation-color-arrow:hsla(0, 0%, 100%, 0.25)}:root{--spruce-selection-color-background:hsl(261, 54%, 70%);--spruce-selection-color-foreground:hsl(0, 0%, 95%)}:root{--spruce-scrollbar-color-thumb-background:hsla(0, 0%, 100%, 0.15);--spruce-scrollbar-color-thumb-background-hover:hsla(0, 0%, 100%, 0.25);--spruce-scrollbar-color-track-background:hsla(0, 0%, 100%, 0.05)}:root{--spruce-prism-color-color:hsl(217, 34%, 88%);--spruce-prism-color-background:hsl(207, 83%, 10%);--spruce-prism-color-comment:hsl(180, 9%, 55%);--spruce-prism-color-punctuation:hsl(276, 68%, 75%);--spruce-prism-color-namespace:hsl(197, 31%, 77%);--spruce-prism-color-deleted:hsla(1, 83%, 63%, 0.56);--spruce-prism-color-boolean:hsl(350, 100%, 67%);--spruce-prism-color-number:hsl(14, 90%, 70%);--spruce-prism-color-constant:hsl(221, 100%, 75%);--spruce-prism-color-class-name:hsl(33, 100%, 77%);--spruce-prism-color-regex:hsl(217, 34%, 88%)}:root{--spruce-table-color-border:hsla(0, 0%, 100%, 0.08);--spruce-table-color-caption:hsl(0, 0%, 90%);--spruce-table-color-heading:hsl(0, 0%, 95%);--spruce-table-color-hover:hsla(0, 0%, 100%, 0.05);--spruce-table-color-text:hsl(0, 0%, 90%);--spruce-table-color-stripe:hsla(0, 0%, 100%, 0.025)}}.container{align-items:center;block-size:calc(100dvh - 2 * 1.5rem);display:flex;justify-content:center;margin:1.5rem;min-block-size:30rem}.container__inner{display:flex;flex-direction:column;gap:1.5rem;inline-size:30rem;max-inline-size:100%}.display-card{border:1px solid var(--spruce-base-color-border);border-radius:.725rem;display:flex;flex-direction:column;gap:1.5rem;padding:clamp(1.5rem,5vw,3rem)}.display-card__title{font-size:clamp(1.66015625rem,2vw + 1rem,1.953125rem);margin-block:0}.display-card ul{list-style:none;margin:0;padding:0}.display-card ul>*+*{border-block-start:1px dashed var(--spruce-base-color-border);margin-block-start:1rem;padding-block-start:1rem}strong{color:var(--spruce-base-color-heading)}</style></head><body><div class="container"><div class="container__inner"><div class="display-card"><h1 class="display-card__title">Report</h1><ul id="data"><li><strong>UA:</strong> <span id="ua">...</span></li><li><strong>IP:</strong> <span id="ip">...</span></li><li><strong>Time:</strong> <span id="time">...</span></li></ul><button id="copy-btn" class="btn btn--primary btn--primary-shadow btn--block btn--lg"><svg class="btn__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg> <span class="btn__caption">Copy</span></button></div></div></div><script>(() => {
const uaEl = document.getElementById('ua');
const ipEl = document.getElementById('ip');
const timeEl = document.getElementById('time');
uaEl.innerHTML = navigator.userAgent;
timeEl.innerHTML = (new Date()).toUTCString();
fetch('https://api64.ipify.org?format=json')
.then((res) => res.json())
.then((data) => {
ipEl.innerHTML = data.ip;
});
})();</script><script>(() => {
const copyBtn = document.getElementById('copy-btn');
const copyBtnCaption = copyBtn.querySelector('.btn__caption');
async function copyTextToClipboard() {
const copiedText = document.getElementById('data').innerText;
if ('clipboard' in navigator) {
return navigator.clipboard.writeText(copiedText);
}
return document.execCommand('copy', true, copiedText);
}
function handleCopyClick() {
copyTextToClipboard()
.then(() => {
copyBtnCaption.innerHTML = 'Copied!';
setTimeout(() => {
copyBtnCaption.innerHTML = 'Copy';
}, 1500);
})
.catch((err) => {
console.log(err); // eslint-disable-line
});
}
copyBtn.addEventListener('click', handleCopyClick);
})();</script></body></html>