src/pages/basicDashboard/InternetSetup.vue

@@ -1,6 +1,63 @@
 <template>
-  <div>
+  <div id="internetSetupComponent">
     <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>
 </template>
 

src/styles/basicDashboard.css

@@ -100,4 +100,58 @@
       line-height: 30px;
     }
   }
+}
+
+#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;
+    }
+  }
 }