RouterUI/router-ui-frontend
2
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Added radio options for internet setup #4

Merged
keyemail merged 1 commit from internetsetup into master 2024-09-03 13:27:00 +00:00
Conversation 1 Commits 1 Files changed 2 +112 -1
2 changed files with 112 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d3f85d7d23 - Show all commits

59
src/pages/basicDashboard/InternetSetup.vue
View file

@ -1,6 +1,63 @@
<template> <template>
<div> <div id="internetSetupComponent">
<h2 class="title">Internet Setup</h2> <h2 class="title">Internet Setup</h2>
<section id="internetSetupLogin">
<h3>Does your internet connection require a login?</h3>
<!-- There will be no input (keyboard) for the time being because that requires backend to handle. -->
<form>
<label>
<input type="radio" name="internetLoginOption" value="1">
<p>Yes</p>
</label>
<label>
<input type="radio" name="internetLoginOption" value="2">
<p>No</p>
</label>
</form>
</section>
<section id="internetSetupIP">
<h3>Internet IP Address</h3>
<form>
<label>
<input type="radio" name="internetIPOption" value="1">
<p>Dynamic IP from ISP</p>
</label>
<label>
<input type="radio" name="internetIPOption" value="2">
<p>Static IP from ISP</p>
</label>
</form>
</section>
<section>
<h3>DNS (Domain Name Server) Address</h3>
<form>
<label>
<input type="radio" name="internetDNSOption" value="1">
<p>Automatic DNS from ISP</p>
</label>
<label>
<input type="radio" name="internetDNSOption" value="2">
<p>Select DNS Servers</p>
</label>
</form>
</section>
<section>
<h3>Router MAC Address</h3>
<form>
<label>
<input type="radio" name="internetMACOption" value="1">
<p>Default Address</p>
</label>
<label>
<input type="radio" name="internetMACOption" value="2">
<p>Computer MAC Address</p>
</label>
<label>
<input type="radio" name="internetMACOption" value="2">
<p>Specific MAC Adress</p>
</label>
</form>
</section>
</div> </div>
</template> </template>

54
src/styles/basicDashboard.css
View file

@ -101,3 +101,57 @@
} }
} }
} }
#internetSetupComponent {
display: flex;
flex-direction: column;
gap: 20px;
section {
margin-bottom: 10px;
display: flex;
flex-direction: column;
gap: 10px;
width: 400px;
}
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 1.15em;
height:1.15em;
border: 0.15em solid #fff;
border-radius: 10%;
display: flex;
align-items: center;
justify-content: center;
}
input[type="radio"]::before {
content: "";
width: 100%;
height: 100%;
border-radius: 10%;
transform: scale(0);
transition: 0.3s transform;
background-color: var(--dark-highlight-color);
}
input[type="radio"]:checked::before {
transform: scale(1);
}
label {
margin-top: 5px;
display: flex;
align-items: center;
background-color: var(--dark-bg-alt-2-color);
height: 50px;
width: 100%;
border-radius: 5px;
padding: 10px;
p {
margin-left: 10px;
font-size: 1.2rem;
}
}
}