Started on dashboard, new icons
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/x-icon" href="./logo.ico"/>
|
||||
<link rel="icon" type="image/x-icon" href="src/assets/logo.png"/>
|
||||
<title>Wifi Extender</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,12 @@ import './styles/Main.css'
|
|||
|
||||
function Index() {
|
||||
let [loginState, setLoginState] = useState(false);
|
||||
let [loggedUser, setLoggedUser] = useState('')
|
||||
let [loggedUser, setLoggedUser] = useState('');
|
||||
|
||||
let [routerName, setRoutername] = useState('Example Router');
|
||||
let [twoGExtendedName, settwoGExtendedName] = useState('Example 2G Network');
|
||||
let [fiveGExtendedName, setFiveGExtendedName] = useState('Example 5G Network');
|
||||
let [devicesOnline, setDevicesOnline] = useState(0)
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
|
@ -30,7 +35,7 @@ function Index() {
|
|||
<p>{ loginState }</p>
|
||||
<Navbar LoggedUser={ loggedUser } />
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/" element={<Dashboard RouterName={ routerName } TwoGExtendedName={ twoGExtendedName } FiveGExtendedName={ fiveGExtendedName } DevicesOnline={ devicesOnline } />} />
|
||||
<Route path="/devices" element={<Devices />} />
|
||||
<Route path="/extend" element={<Extend />} />
|
||||
<Route path="/wireless" element={<WirelessSettings />} />
|
||||
|
|
|
|||
BIN
src/assets/arrow.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/device.png
Normal file
|
After Width: | Height: | Size: 8.2 KiB |
BIN
src/assets/extender.png
Normal file
|
After Width: | Height: | Size: 9.1 KiB |
BIN
src/assets/gear.png
Normal file
|
After Width: | Height: | Size: 74 KiB |
BIN
src/assets/globe.png
Normal file
|
After Width: | Height: | Size: 95 KiB |
BIN
src/assets/high_signal.png
Normal file
|
After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 13 KiB |
BIN
src/assets/low_signal.png
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
src/assets/medium_signal.png
Normal file
|
After Width: | Height: | Size: 74 KiB |
BIN
src/assets/router.png
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/signal.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
src/assets/very_low_signal.png
Normal file
|
After Width: | Height: | Size: 56 KiB |
|
|
@ -4,7 +4,7 @@ interface Props {
|
|||
|
||||
function Navbar({ LoggedUser }: Props) {
|
||||
return (
|
||||
<nav>
|
||||
<nav id="topNav">
|
||||
<h1>Wifi Extender Hub</h1>
|
||||
<p>{ LoggedUser }</p>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,82 @@
|
|||
function Dashboard() {
|
||||
import '../styles/Dashboard.css'
|
||||
import Globe from '../assets/globe.png'
|
||||
import Arrow from '../assets/arrow.png'
|
||||
import Router from '../assets/router.png'
|
||||
import Signal from '../assets/signal.png'
|
||||
import VeryLowSignal from '../assets/very_low_signal.png'
|
||||
import LowSignal from '../assets/low_signal.png'
|
||||
import MediumSignal from '../assets/medium_signal.png'
|
||||
import HighSignal from '../assets/high_signal.png'
|
||||
import Extender from '../assets/extender.png'
|
||||
import Devices from '../assets/device.png'
|
||||
import Gear from '../assets/gear.png'
|
||||
|
||||
interface Props {
|
||||
RouterName: string;
|
||||
TwoGExtendedName: string;
|
||||
FiveGExtendedName: string;
|
||||
DevicesOnline: number;
|
||||
}
|
||||
|
||||
function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnline }: Props) {
|
||||
return (
|
||||
<>
|
||||
<a href="/wireless"><p>hi</p></a>
|
||||
<header>
|
||||
<ul>
|
||||
<li>
|
||||
<img src={ Globe } className="listIcons" />
|
||||
<h2>Internet</h2>
|
||||
</li>
|
||||
<li>
|
||||
<img src={ Arrow } className="arrow" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={ Router } className="listIcons" />
|
||||
<h2>Router</h2>
|
||||
<p>{ RouterName }</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src= { MediumSignal } className="signal" />
|
||||
</li>
|
||||
<li>
|
||||
<img src= { Extender } className="listIcons" />
|
||||
<h2>Extender</h2>
|
||||
<p>{ TwoGExtendedName }</p>
|
||||
<p>{ FiveGExtendedName }</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src= { HighSignal } className="signal" />
|
||||
</li>
|
||||
<li>
|
||||
<img src={ Devices } className="listIcons" />
|
||||
<h2>Devices</h2>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<nav id="lowerNav">
|
||||
<ul>
|
||||
<li>
|
||||
<img src={ Devices } />
|
||||
<h2>Device List</h2>
|
||||
<p>{ DevicesOnline } Devices Online</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src={ Globe } />
|
||||
<h2>Extend Network</h2>
|
||||
<p>Amplify Network</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src={ Signal } />
|
||||
<h2>Wireless Settings</h2>
|
||||
<p>Set Extender Network Up</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src={ Gear } />
|
||||
<h2>System Settings</h2>
|
||||
<p>Change Extender Settings</p>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ function Login({ setLogin, setUser }: Props) {
|
|||
let [usernameError, setUsernameError] = useState(false);
|
||||
let [passwordError, setPasswordError] = useState(false);
|
||||
|
||||
setUser('');
|
||||
|
||||
const handleLogin = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
|
|
|
|||
0
src/pages/ResetInstructions.tsx
Normal file
67
src/styles/Dashboard.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
height: fit-content;
|
||||
background-color: #071e42;
|
||||
margin-top: 20px;
|
||||
border-radius: 20px;
|
||||
padding: 90px 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inherit;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
|
||||
img {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.listIcons {
|
||||
max-height: 160px;
|
||||
}
|
||||
.arrow {
|
||||
max-height: 60px;
|
||||
}
|
||||
.signal {
|
||||
max-height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
#lowerNav {
|
||||
margin-top: 20px;
|
||||
|
||||
ul {
|
||||
justify-content: space-around;
|
||||
}
|
||||
li{
|
||||
padding: 40px;
|
||||
background-color: #071e42;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 20px;
|
||||
width: 300px;
|
||||
height: 350px;
|
||||
transition: 0.3s background-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
margin: 10px;
|
||||
max-height: 160px;
|
||||
aspect-ratio: 1/1;
|
||||
width: fit-content;
|
||||
}
|
||||
li:hover {
|
||||
background-color: #0069ff;
|
||||
}
|
||||
}
|
||||
|
|
@ -60,7 +60,7 @@ form {
|
|||
max-width: fit-content;
|
||||
}
|
||||
a {
|
||||
color: cyan;
|
||||
color: #008cff;
|
||||
}
|
||||
button {
|
||||
background-color: #071436;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
#topNav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
|
|||