diff --git a/src/App.css b/src/App.css index 5def787..20629e0 100644 --- a/src/App.css +++ b/src/App.css @@ -3,7 +3,7 @@ --text: #212121; --background: #fff; --scrollbar: #ccc; - --navbar: #F7F9F9; + --navbar: #FBFCFC; --icon: #AAB7B8; --border: #F0F3F4; } diff --git a/src/App.jsx b/src/App.jsx index 7d12f8f..f479bbe 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,191 +1,13 @@ import * as React from 'react'; -import { useEffect } from 'react'; -import * as Bowser from 'bowser'; import Navbar from './Navbar'; +import Table from './Table'; import './App.css'; -const updateDOM = (id, text) => { - document.getElementById(id).innerHTML += text; -}; - -const App = () => { - useEffect(() => { - const uaResult = Bowser.parse(navigator.userAgent); - updateDOM('browser', uaResult.browser.name); - updateDOM('browserVersion', uaResult.browser.version); - updateDOM('browserEngine', uaResult.engine.name); - updateDOM('os', `${uaResult.os.name} ${uaResult.os.versionName}`); - - updateDOM('language', navigator.language); - updateDOM('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone); - const date = new Date(); - updateDOM('offset', date.getTimezoneOffset()); - updateDOM('cookies', navigator.cookieEnabled); - updateDOM('java', navigator.javaEnabled()); - updateDOM('dnt', navigator.doNotTrack ? 'true' : 'false'); - - const pluginsLength = navigator.plugins.length; - let plugins = ''; - for (let i = 0; i < pluginsLength; i++) { - if (i !== 0) plugins += ', '; - plugins += navigator.plugins[i].name; - } - updateDOM('plugins', plugins); - - updateDOM('platform', uaResult.platform.type); - updateDOM('screenSize', `${window.screen.width}x${window.screen.height}`); - updateDOM('color', window.screen.colorDepth); - - navigator.getBattery().then((battery) => { - updateDOM('batteryLevel', `${Math.round(battery.level * 100)}%`); - updateDOM('batteryStatus', battery.charging ? 'Charging' : 'Not charging'); - }); - - updateDOM('memory', `${navigator.deviceMemory}GB`); - updateDOM('cores', navigator.hardwareConcurrency); - updateDOM('maxTouch', navigator.maxTouchPoints); - const gl = document.createElement('canvas').getContext('webgl'); - const ext = gl.getExtension('WEBGL_debug_renderer_info'); - updateDOM('vendor', gl.getParameter(ext.UNMASKED_VENDOR_WEBGL)); - updateDOM('renderer', gl.getParameter(ext.UNMASKED_RENDERER_WEBGL)); - }, []); - - return ( -
- - - -
Software
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hardware
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Browser: -
-
Browser version: -
-
Browser engine: -
-
Operating system: -
-
Language: -
-
Timezone: -
-
Timezone offset: -
-
Cookies enabled: -
-
Java enabled: -
-
DNT header enabled: -
-
Plugins: -
-
Platform: -
-
Screen resolution: -
-
Color Resolution: -
-
Battery level: -
-
Battery status: -
-
Device memory: -
-
# of CPU cores: -
-
Max touchpoints: -
-
WebGL vendor: -
-
WebGL renderer: -
-
-
- ); -}; +const App = () => ( +
+ + + +); export default App; diff --git a/src/Table.js b/src/Table.js new file mode 100644 index 0000000..ece26b0 --- /dev/null +++ b/src/Table.js @@ -0,0 +1,141 @@ +import * as React from 'react'; +import { useState, useEffect } from 'react'; +import Bowser from 'bowser'; + +const Table = () => { + const [batLevel, setBatLevel] = useState(''); + const [batStatus, setBatStatus] = useState(''); + + useEffect(() => { + navigator.getBattery().then((res) => { + setBatLevel(`${Math.round(res.level * 100)}%`); + setBatStatus(res.charging ? 'Charging' : 'Not charging'); + }); + }, []); + + const uaResult = Bowser.parse(navigator.userAgent); + const browser = uaResult.browser.name; + const browserVersion = uaResult.browser.version; + const browserEngine = uaResult.engine.name; + const os = `${uaResult.os.name} ${uaResult.os.versionName}`; + const platform = uaResult.platform.type; + + const language = navigator.language; + const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; + const date = new Date(); + const offset = date.getTimezoneOffset(); + const cookies = navigator.cookieEnabled ? 'True' : 'False'; + const java = navigator.javaEnabled() ? 'True' : 'False'; + const dnt = navigator.doNotTrack ? 'True' : 'False'; + + const pluginsLength = navigator.plugins.length; + let pluginList = ''; + for (let i = 0; i < pluginsLength; i++) { + if (i !== 0) pluginList += ', '; + pluginList += navigator.plugins[i].name; + } + const plugins = pluginList; + const screenSize = `${window.screen.width}x${window.screen.height}`; + const color = window.screen.colorDepth; + + const memory = `${navigator.deviceMemory}GB`; + const cores = navigator.hardwareConcurrency; + const maxTouch = navigator.maxTouchPoints; + const gl = document.createElement('canvas').getContext('webgl'); + const ext = gl.getExtension('WEBGL_debug_renderer_info'); + const vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL); + const renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL); + return ( +
+ +
Software
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hardware
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browser:{browser}
Browser version:{browserVersion}
Browser engine:{browserEngine}
Operating system:{os}
Language:{language}
Timezone:{timezone}
Timezone offset:{offset}
Cookies enabled:{cookies}
Java enabled:{java}
DNT header enabled:{dnt}
Plugins:{plugins}
Platform:{platform}
Screen resolution:{screenSize}
Color Resolution:{color}
Battery level:{batLevel}
Battery status:{batStatus}
Device memory:{memory}
# of CPU cores:{cores}
Max touchpoints:{maxTouch}
WebGL vendor:{vendor}
WebGL renderer:{renderer}
+ ); +}; + +export default Table;