Finished switching to table
This commit is contained in:
parent
a63492aa3f
commit
b28764705b
3 changed files with 115 additions and 69 deletions
|
|
@ -1,10 +1,10 @@
|
|||
.title {
|
||||
font-weight: 600;
|
||||
margin: 3px 0 0 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
tr {
|
||||
|
|
@ -18,8 +18,4 @@ tr {
|
|||
|
||||
.flagWrap {
|
||||
margin: 0 0 0 6px;
|
||||
}
|
||||
|
||||
.loadingFlag {
|
||||
display: none;
|
||||
}
|
||||
176
src/App.jsx
176
src/App.jsx
|
|
@ -58,14 +58,15 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<div className="App">
|
||||
<div className="title">Connection</div>
|
||||
<table>
|
||||
<col style="width:40%" />
|
||||
<col style="width:60%" />
|
||||
<div className="title">Connection</div>
|
||||
<tr>
|
||||
<td>IP address:</td>
|
||||
<td>
|
||||
<div id="ipAddress" />
|
||||
</td>
|
||||
<td>?</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Country:</td>
|
||||
|
|
@ -77,96 +78,145 @@ const App = () => {
|
|||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>?</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Region:</td>
|
||||
<td>
|
||||
<div id="region" />
|
||||
</td>
|
||||
<td>?</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>City:</td>
|
||||
<td>
|
||||
<div id="city" />
|
||||
</td>
|
||||
<td>?</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zip:</td>
|
||||
<td>
|
||||
<div id="zip" />
|
||||
</td>
|
||||
<td>?</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Provider:</td>
|
||||
<td>
|
||||
<div id="provider" />
|
||||
</td>
|
||||
<td>?</td>
|
||||
</tr>
|
||||
<div className="title">Software</div>
|
||||
<tr>
|
||||
<td>Browser:</td>
|
||||
<td>
|
||||
<div id="browser" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Browser version:</td>
|
||||
<td>
|
||||
<div id="browserVersion" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Browser engine:</td>
|
||||
<td>
|
||||
<div id="browserEngine" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Operating system:</td>
|
||||
<td>
|
||||
<div id="os" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Language:</td>
|
||||
<td>
|
||||
<div id="language" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timezone:</td>
|
||||
<td>
|
||||
<div id="timezone" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cookies enabled:</td>
|
||||
<td>
|
||||
<div id="cookies" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Java enabled:</td>
|
||||
<td>
|
||||
<div id="java" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DNT header enabled:</td>
|
||||
<td>
|
||||
<div id="dnt" />
|
||||
</td>
|
||||
</tr>
|
||||
<div className="title">Hardware</div>
|
||||
<tr>
|
||||
<td>Platform:</td>
|
||||
<td>
|
||||
<div id="platform" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Screen resolution:</td>
|
||||
<td>
|
||||
<div id="screenSize" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Color Resolution:</td>
|
||||
<td>
|
||||
<div id="color" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Battery level:</td>
|
||||
<td>
|
||||
<div id="batteryLevel" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Battery status:</td>
|
||||
<td>
|
||||
<div id="batteryStatus" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Device memory:</td>
|
||||
<td>
|
||||
<div id="memory" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td># of CPU cores:</td>
|
||||
<td>
|
||||
<div id="cores" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WebGL vendor:</td>
|
||||
<td>
|
||||
<div id="vendor" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WebGL renderer:</td>
|
||||
<td>
|
||||
<div id="renderer" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div className="title">Software</div>
|
||||
<div className="item" id="browser">
|
||||
Browser:{' '}
|
||||
</div>
|
||||
<div className="item" id="browserVersion">
|
||||
Browser version:{' '}
|
||||
</div>
|
||||
<div className="item" id="browserEngine">
|
||||
Browser engine:{' '}
|
||||
</div>
|
||||
<div className="item" id="os">
|
||||
Operating system:{' '}
|
||||
</div>
|
||||
<div className="item" id="language">
|
||||
Language:{' '}
|
||||
</div>
|
||||
<div className="item" id="timezone">
|
||||
Timezone:{' '}
|
||||
</div>
|
||||
<div className="item" id="cookies">
|
||||
Cookies enabled:{' '}
|
||||
</div>
|
||||
<div className="item" id="java">
|
||||
Java enabled:{' '}
|
||||
</div>
|
||||
<div className="item" id="dnt">
|
||||
DNT header enabled:{' '}
|
||||
</div>
|
||||
{/* <div className="item" id="plugins">
|
||||
Plugins:{' '}
|
||||
</div> */}
|
||||
<div className="title">Hardware</div>
|
||||
<div className="item" id="platform">
|
||||
Platform:{' '}
|
||||
</div>
|
||||
<div className="item" id="screenSize">
|
||||
Screen resolution:{' '}
|
||||
</div>
|
||||
<div className="item" id="color">
|
||||
Color Resolution:{' '}
|
||||
</div>
|
||||
<div className="item" id="batteryLevel">
|
||||
Battery level:{' '}
|
||||
</div>
|
||||
<div className="item" id="batteryStatus">
|
||||
Battery status:{' '}
|
||||
</div>
|
||||
<div className="item" id="memory">
|
||||
Device memory:{' '}
|
||||
</div>
|
||||
<div className="item" id="cores">
|
||||
# of CPU cores:{' '}
|
||||
</div>
|
||||
<div className="item" id="vendor">
|
||||
WebGL vendor:{' '}
|
||||
</div>
|
||||
<div className="item" id="renderer">
|
||||
WebGL renderer:{' '}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,5 +8,5 @@ body {
|
|||
background-color: var(--background);
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
width: 350px;
|
||||
width: 400px;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue