Added mobile css
This commit is contained in:
z0ccc
parent
c4e0a403ef
commit
fbab10d3f5
6 changed files with 66 additions and 21 deletions
|
|
@ -1,11 +1,11 @@
|
|||
import { ReactComponent as WifiIcon } from '../images/wifi.svg';
|
||||
import { ReactComponent as BrowserIcon } from '../images/browser.svg';
|
||||
import { ReactComponent as DesktopIcon } from '../images/desktop.svg';
|
||||
import { ReactComponent as FingerprintIcon } from '../images/fingerprint.svg';
|
||||
|
||||
const Icons = {
|
||||
wifi: <WifiIcon />,
|
||||
browser: <BrowserIcon />,
|
||||
desktop: <DesktopIcon />,
|
||||
fingerprint: <FingerprintIcon />,
|
||||
};
|
||||
|
||||
const ContentList = ({ items }) => (
|
||||
|
|
|
|||
|
|
@ -132,9 +132,9 @@ const FingerprintBlock = () => {
|
|||
)}
|
||||
</div>
|
||||
<p>
|
||||
<b>Explanation:</b> This fingerprint is a unique identifier that can be
|
||||
<b>Explanation:</b> This is a unique identifier that can be
|
||||
used to follow you around the web. Even if you clear cookies, change
|
||||
your IP or use private mode the fingerprint will stay the same. Enter
|
||||
your IP or use private mode the hash will stay the same. Enter
|
||||
your name below and reload the page in private mode to test it out.
|
||||
</p>
|
||||
{saved ? (
|
||||
|
|
|
|||
|
|
@ -4,13 +4,8 @@ import ScanBlock from './ScanBlock';
|
|||
|
||||
const contentItems = [
|
||||
{
|
||||
title: 'Hardware',
|
||||
icon: 'desktop',
|
||||
body: 'Browsers reveal bits of identifiable information. This data can be combined into a digital fingerprint which can be used to follow you around the web.',
|
||||
},
|
||||
{
|
||||
title: 'Software',
|
||||
icon: 'browser',
|
||||
title: 'Fingerprint',
|
||||
icon: 'fingerprint',
|
||||
body: 'Browsers reveal bits of identifiable information. This data can be combined into a digital fingerprint which can be used to follow you around the web.',
|
||||
},
|
||||
{
|
||||
|
|
@ -18,6 +13,11 @@ const contentItems = [
|
|||
icon: 'wifi',
|
||||
body: 'Browsers reveal bits of identifiable information. This data can be combined into a digital fingerprint which can be used to follow you around the web.',
|
||||
},
|
||||
{
|
||||
title: 'Software',
|
||||
icon: 'browser',
|
||||
body: 'Browsers reveal bits of identifiable information. This data can be combined into a digital fingerprint which can be used to follow you around the web.',
|
||||
},
|
||||
];
|
||||
|
||||
const StartBlock = ({ onScanClick }) => {
|
||||
|
|
@ -27,6 +27,7 @@ const StartBlock = ({ onScanClick }) => {
|
|||
document.getElementById('scanButton').value = 'Loading...';
|
||||
await delay(100);
|
||||
startScan();
|
||||
window.scrollTo(0, 0);
|
||||
};
|
||||
|
||||
const startScan = useCallback(() => {
|
||||
|
|
@ -37,10 +38,9 @@ const StartBlock = ({ onScanClick }) => {
|
|||
<ScanBlock>
|
||||
<h2>About</h2>
|
||||
<div className="contentBody">
|
||||
With the Vytal Browser Privacy Check, you can determine which traces you
|
||||
or your browser leave while surfing. Our test is intended to raise
|
||||
awareness of which data can be used by websites and advertisers to
|
||||
create a profile of you or to track your activities online.
|
||||
Vytal shows you what traces your browser leaves behind while surfing the
|
||||
web. This scan allows you to understand how easy it is to identify and
|
||||
track your browser even while using private mode.
|
||||
</div>
|
||||
<ContentList items={contentItems} />
|
||||
<input
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<g fill="#9fa6b2">
|
||||
<path d="M528 0H48C21.5 0 0 21.5 0 48v288c0 26.5 21.5 48 48 48h192l-24 96h-72c-8.8 0-16 7.2-16 16s7.2 16 16 16h288c8.8 0 16-7.2 16-16s-7.2-16-16-16h-72l-24-96h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM249 480l16-64h46l16 64h-78zm295-144c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h480c8.8 0 16 7.2 16 16v288z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 451 B |
5
frontend/src/images/fingerprint.svg
Normal file
5
frontend/src/images/fingerprint.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<g fill="#9fa6b2">
|
||||
<path d="M256 169.92c-28.28.41-52.84 9.62-71.37 28.17-18 18-27.69 41.94-27.28 67.44.78 50.23-3.91 100.5-14 149.39-1.81 8.66 3.78 17.12 12.41 18.91 8.5 1.66 17.09-3.77 18.91-12.44 10.56-51.17 15.5-103.78 14.69-156.35-.25-16.77 6.09-32.5 17.91-44.31 18.66-18.66 42.27-18.8 48.75-18.8 37.12.55 66.41 30.19 66.97 66.06.78 50.37-2.97 100.86-11.12 150.06-1.44 8.72 4.44 16.95 13.16 18.39.91.16 1.78.22 2.66.22 7.69 0 14.47-5.55 15.75-13.39 8.47-51.08 12.34-103.48 11.56-155.79-.87-53-44.81-96.76-99-97.56zm-.09 86.09c-8.84.14-15.87 7.41-15.75 16.25 1.12 73.39-8.22 144.99-27.78 215.07l-1.22 4.33c-1.85 6.63 1.74 20.34 15.41 20.34 7 0 13.41-4.61 15.41-11.66l1.22-4.37c20.41-73.08 30.16-147.74 28.97-224.21-.14-8.84-8.23-15.9-16.26-15.75zM112.66 149.79c-25.19 30.98-38.72 70.11-38.09 110.15.62 39.56-2.62 79.14-9.59 117.61-1.56 8.7 4.19 17.03 12.91 18.61.97.17 1.91.25 2.87.25 7.56 0 14.31-5.42 15.72-13.14 7.34-40.53 10.72-82.18 10.09-123.82-.53-33.01 10.19-63.95 30.91-89.47 5.59-6.86 4.53-16.94-2.31-22.51-6.85-5.55-16.91-4.57-22.51 2.32zm399.22 103.03c-.25-16.5-2.19-33.03-5.75-49.14-1.91-8.61-10.34-14-19.06-12.17-8.62 1.91-14.09 10.44-12.19 19.08 3.09 14 4.78 28.39 5 42.73.12 7.66.16 15.31.09 22.97-.06 8.83 7.03 16.05 15.87 16.12h.12c8.78 0 15.94-7.08 16-15.87.07-7.91.04-15.81-.08-23.72zM252.6.05C182.63-1.29 118.32 24.88 70.32 72.91 24.04 119.22-.87 180.76.16 246.2c.12 7.55.06 15.09-.16 22.62-.25 8.83 6.72 16.2 15.56 16.45H16c8.62 0 15.75-6.87 16-15.55.22-8 .28-16.02.16-24.03-.9-56.69 20.69-110.04 60.78-150.16 41.78-41.84 98.9-64.37 159.15-63.48 74.69 1.09 144.87 38.23 187.75 99.32 5.12 7.23 15.12 8.97 22.28 3.91 7.25-5.08 9-15.05 3.91-22.28C417.28 43.52 337.5 1.3 252.6.05zm1.28 84.93a182.36 182.36 0 0 0-45.19 4.91c-8.59 2.03-13.91 10.66-11.87 19.26 2.03 8.58 10.75 13.87 19.25 11.86 12.12-2.86 25.09-4.25 37.31-4.03 82.78 1.22 151.12 67.56 152.37 147.89.62 39.65-1.34 79.59-5.81 118.7-1 8.78 5.31 16.7 14.09 17.7.62.08 1.22.11 1.84.11 8 0 14.94-6.02 15.87-14.19 4.62-40.47 6.62-81.79 6-122.82-1.49-97.44-83.99-177.92-183.86-179.39z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -30,6 +30,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1 0 auto;
|
||||
margin: 0 18px;
|
||||
}
|
||||
|
||||
.centerBlockInner {
|
||||
|
|
@ -176,7 +177,7 @@ input[type='text'] {
|
|||
border-radius: 6px;
|
||||
padding: 6px;
|
||||
margin: 0 6px 0 0;
|
||||
width: 30%;
|
||||
width: 200px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -192,3 +193,47 @@ input[type='text'] {
|
|||
#saveButton:hover {
|
||||
background-color: var(--border);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.contentBlock {
|
||||
padding: 18px;
|
||||
margin: 0 0 18px 0;
|
||||
}
|
||||
|
||||
.centerBlockInner {
|
||||
width: 650px;
|
||||
margin: 12px 0 0 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 185px;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.contentIcon {
|
||||
flex: none;
|
||||
margin: 0 18px 0 0;
|
||||
width: 28px !important;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.boxWrap {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue