me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Re-organized website

Browse source
This commit is contained in:
z0ccc 2022-05-18 00:35:54 -04:00
parent 113f57d1dd
commit 59d9128afe
11 changed files with 151 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.eslintrc.js
View file

@ -40,6 +40,7 @@ module.exports = {
'no-bitwise': 'off',
'react/no-array-index-key': 'off',
'nonblock-statement-body-position': 'off',
'react/button-has-type': 'off'
'react/button-has-type': 'off',
'no-unused-vars': 'warn',
},
};

12
src/components/App.css
View file

@ -26,12 +26,6 @@ body {
width: 100%;
height: 100%;
background: var(--main);
background: linear-gradient(
165deg,
rgba(87, 35, 117, 1) 0%,
rgba(148, 62, 197, 1) 40%,
rgba(169, 100, 208, 1) 100%
);
z-index: -1;
}
@ -58,7 +52,7 @@ b {
.tableWrap {
border: 1px solid var(--border);
border-radius: 6px;
border-radius: 4px;
}
table {
@ -118,7 +112,7 @@ input[type="checkbox"] {
display: block;
background-color: var(--main);
color: #fff;
border-radius: 6px;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
width: 100%;
@ -136,7 +130,7 @@ input[type="checkbox"] {
.boxWrap {
border: 1px solid var(--border);
border-radius: 6px;
border-radius: 4px;
padding: 10px;
}

2
src/components/Blocks.css
View file

@ -1,7 +1,7 @@
.contentBlock {
color: var(--text);
background-color: #fff;
border-radius: 6px;
border-radius: 4px;
box-sizing: border-box;
padding: 20px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

98
src/components/Blocks.js
View file

@ -43,59 +43,53 @@ const Blocks = () => {
return (
<>
{initialData && delayedData && frameData && workerData ? (
<DataContext.Provider
value={{
initialData,
delayedData,
frameData,
workerData,
}}
>
<div className="centerBlockInner">
<DataBlock
title="Intl.DateTimeFormat().resolvedOptions().timeZone"
type="timeZone"
/>
<DataBlock
title="Intl.DateTimeFormat().resolvedOptions().locale"
type="locale"
/>
<DataBlock title="navigator.userAgent" type="userAgent" />
</div>
<div className="centerBlockInner">
<DataBlock title="new Date().toString()" type="dateString" />
<DataBlock title="new Date().toLocaleString()" type="dateLocale" />
<DataBlock
title="new Date().getTimezoneOffset()"
type="timezoneOffset"
/>
<GeolocationBlock />
</div>
<div className="centerBlockMobile">
<DataBlock
title="Intl.DateTimeFormat().resolvedOptions().timeZone"
type="timeZone"
/>
<DataBlock
title="Intl.DateTimeFormat().resolvedOptions().locale"
type="locale"
/>
<DataBlock title="new Date().toString()" type="dateString" />
<DataBlock title="new Date().toLocaleString()" type="dateLocale" />
<DataBlock
title="new Date().getTimezoneOffset()"
type="timezoneOffset"
/>
<DataBlock title="navigator.userAgent" type="userAgent" />
<GeolocationBlock />
</div>
</DataContext.Provider>
) : (
<div className="contentBlock loadBlock">
<center>Loading...</center>
<DataContext.Provider
value={{
initialData,
delayedData,
frameData,
workerData,
}}
>
<div className="centerBlockInner">
<DataBlock
title="Intl.DateTimeFormat().resolvedOptions().timeZone"
type="timeZone"
/>
<DataBlock
title="Intl.DateTimeFormat().resolvedOptions().locale"
type="locale"
/>
<DataBlock title="navigator.userAgent" type="userAgent" />
</div>
)}
<div className="centerBlockInner">
<DataBlock
title="new Date().getTimezoneOffset()"
type="timezoneOffset"
/>
<DataBlock title="new Date().toLocaleString()" type="dateLocale" />
<DataBlock title="new Date().toString()" type="dateString" />
<GeolocationBlock />
</div>
<div className="centerBlockMobile">
<DataBlock
title="Intl.DateTimeFormat().resolvedOptions().timeZone"
type="timeZone"
/>
<DataBlock
title="Intl.DateTimeFormat().resolvedOptions().locale"
type="locale"
/>
<DataBlock title="new Date().toString()" type="dateString" />
<DataBlock title="new Date().toLocaleString()" type="dateLocale" />
<DataBlock
title="new Date().getTimezoneOffset()"
type="timezoneOffset"
/>
<DataBlock title="navigator.userAgent" type="userAgent" />
<GeolocationBlock />
</div>
</DataContext.Provider>
</>
);
};

45
src/components/DataBlock.js
View file

@ -4,7 +4,18 @@ import Block from './Block';
import TableRow from './TableRow';
const DataBlock = ({ title, type }) => {
const { initialData, delayedData, frameData, workerData } = useContext(DataContext);
const { initialData, delayedData, frameData, workerData } =
useContext(DataContext);
// const test = !workerData || !window.Worker.length;
const isWorkerValid = workerData && window.Worker.length;
// if(workerData && window.Worker.length) {
// isWorkerValid = true
// }
// console.log(isWorkerValid);
return (
<Block>
@ -12,17 +23,33 @@ const DataBlock = ({ title, type }) => {
<div className="tableWrap">
<table>
<tbody>
<TableRow title="Initial" value={initialData[type].value} issues={initialData[type].issues} />
<TableRow title="Delayed" value={delayedData[type].value} issues={delayedData[type].issues} />
<TableRow title="Frame" value={frameData[type].value} issues={frameData[type].issues} />
<TableRow title="Web worker" value={window.Worker.length ? workerData[type].value : null} issues={window.Worker.length ? workerData[type].issues : ['Web workers blocked']} />
<TableRow
title="Initial"
value={initialData ? initialData[type].value : ''}
issues={initialData ? initialData[type].issues : []}
/>
<TableRow
title="Delayed"
value={delayedData ? delayedData[type].value : ''}
issues={delayedData ? delayedData[type].issues : []}
/>
<TableRow
title="Frame"
value={frameData ? frameData[type].value : ''}
issues={frameData ? frameData[type].issues : []}
/>
<TableRow
title="Web worker"
value={isWorkerValid ? workerData[type].value : ''}
issues={
isWorkerValid
? workerData[type].issues
: ['Web workers blocked']
}
/>
</tbody>
</table>
</div>
<p>
Date and language data can be used to identify your
location. Changing the settings on your computer can prevent this.
</p>
</Block>
);
};

8
src/components/GeolocationBlock.js
View file

@ -17,9 +17,6 @@ const GeolocationBlock = () => {
</div>
) : (
<>
<p style={{ marginBottom: '10px' }}>
This data is not included in location prediction
</p>
<div className="tableWrap">
<table>
<tbody>
@ -48,11 +45,6 @@ const GeolocationBlock = () => {
value={buttonValue}
/>
)}
<p>
HTML Geolocation API is used to get the geographical position of a user.
Since this can compromise privacy, its not available unless the user
approves it.
</p>
</Block>
);
};

65
src/components/HeaderBar.js
View file

@ -1,5 +1,7 @@
import './Logo.css';
// import './HeaderBar.css';
import { ReactComponent as LogoImg } from '../images/logo.svg';
import chromeImage from '../images/chrome.png';
import githubImage from '../images/github.png';
const HeaderBar = () => (
<div
@ -8,19 +10,74 @@ const HeaderBar = () => (
alignItems: 'center',
justifyContent: 'space-between',
width: '1024px',
margin: '18px 0',
}}
>
<a
href="."
style={{
width: '180px',
margin: '18px 0',
width: '206px',
}}
alt="LocateJS logo"
>
<LogoImg />
</a>
<div>Download</div>
<div
style={{
display: 'flex',
alignItems: 'center',
height: '50px',
}}
>
<div
style={{
display: 'flex',
alignItems: 'center',
backgroundColor: '#fff',
height: '50px',
borderRadius: '4px',
padding: '0 18px',
boxShadow: 'rgb(0 0 0 / 10%) 0px 4px 12px',
margin: '0 24px 0 0',
fontSize: '15px',
}}
>
<img
src={chromeImage}
alt="Chrome logo"
height="28"
width="28"
style={{
marginRight: '8px',
}}
/>
Download Extension
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
backgroundColor: '#fff',
height: '50px',
borderRadius: '4px',
padding: '0 18px',
boxShadow: 'rgb(0 0 0 / 10%) 0px 4px 12px',
fontSize: '15px',
}}
>
<img
src={githubImage}
alt="Github logo"
height="28"
width="28"
style={{
marginRight: '8px',
}}
/>
Source Code
</div>
</div>
</div>
);

2
src/components/PredictionBlock.css
View file

@ -1,6 +1,6 @@
.mapImg {
width: 100%;
border-radius: 6px;
border-radius: 4px;
border: 1px solid var(--border);
box-sizing: border-box;
display: block;

2
src/components/TableRow.js
View file

@ -15,7 +15,7 @@ const modalStyles = {
transform: 'translate(-50%, -50%)',
padding: '18px',
border: '1px solid var(--border)',
borderRadius: '6px',
borderRadius: '4px',
},
};

BIN
src/images/chrome.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
src/images/github.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB