distinctioncoding · MRW6217 · Nov 19, 2025 · Dec 2, 2025 · Gary-Distinctioncoding · Dec 3, 2025
diff --git a/bgi.png b/bgi.png
diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div class="bg-image sm">
+      <img src="bgi.png" alt="" />
+      <!--覆盖层-->
+      <div
+        class="cover flex flex-col md:flex-row items-center justify-center gap-6 md:gap-10 p-4 md:p-8"
+      >
+        <div
+          class="left-section max-w-[500px] md:mr-[70px] md:mb-20 mb-6 px-2 md:px-0"
+        >
+          <h1 class="font-bold">Welcome to Paint Quote System</h1>
+          <p class="whitespace-normal text-[17px]">
+            Consequat adipisicing ea do labore irrure adipisicing<br> occaecat
+            cupidatat excepteur duis mo
+          </p>
+        </div>
+        <div class="max-w-[150px]"></div>
+        <div class="right-section w-full max-w-[500px] md:mr-[100px]">
+          <h1>Sign Up</h1>
+          <p>Enter details to create your account</p>
+          <div class="input-group">
+            <label for="name">Your name</label>
+            <input type="text" id="name" placeholder="Enter your name" />
+          </div>
+          <div class="input-group">
+            <label for="phone">Phone number</label>
+            <input
+              type="text"
+              id="phone"
+              placeholder="Enter your phone number"
+            />
+          </div>
+          <div class="input-group">
+            <label for="dulux">Dulux account</label>
+            <input
+              type="text"
+              id="dulux"
+              placeholder="Enter your Dulux account"
+            />
+          </div>
+          <div id="btn-group">
+            <button>Sign up</button>
+          </div>
+          <div id="sign-in">
+            <p>Already have an account?<a href="" id="sign-in-link">Sign in</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+
+  <script src="index.js"></script>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,33 @@
+document.querySelector("#btn-group").addEventListener("click", () => {
+  const name = document.querySelector("#name").value.trim();
+  const phone = document.querySelector("#phone").value.trim();
+  const dulux = document.querySelector("#dulux").value.trim();
+
+
+  if (name === "") {
+    alert("Name is required");
+    return;
+  }
+  if (phone === "") {
+    alert("Phone number is required");
+    return;
+  } else if (!/^\d{10,11}$/.test(phone)) {
+    alert("Phone number is invalid");
+    return;
+  }
+
+  if (dulux === "") {
+    alert("Dulux account is required");
+    return;
+  } else if (!/^[a-zA-Z0-9]{5,15}$/.test(dulux)) {
+    alert("Dulux account is invalid");
+    return;
+  } 
+
+  alert("Form submitted successfully!");
+});
+
+document.querySelector("#sign-in-link").addEventListener("click", (e) => {
+  e.preventDefault();
+  alert("Redirecting to sign in page...");
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,142 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.bg-image {
+  position: relative;
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+}
+
+.bg-image img {
+  width: 100%;
+  display: block;
+  height: 100%
+}
+
+.cover {
+  font-family: "Inter", sans-serif;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.left-section h1 {
+  color: rgb(9, 64, 90);
+  font-size: 25px;
+}
+
+.left-section h1::after {
+  content: "";
+  display: block;
+  width: 400px;
+  height: 2px;
+  background-color: rgb(9, 64, 90);
+  margin-top: 8px;
+  border-radius: 2px;
+}
+
+.left-section p {
+  color: rgb(9, 64, 90);
+  font-size: 15px;
+  margin-top: 20px;
+}
+
+.right-section {
+  background-color: rgba(255, 255, 255, 0.877);
+  height: 470px;
+  border-radius: 12px;
+  border: none;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.right-section h1 {
+  color: #4c4c4c;
+  text-align: center;
+  margin-bottom: 5px;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.right-section p {
+  color: #7e7e7e;
+  text-align: center;
+  margin-top: auto;
+  margin-bottom: 25px;
+  font-size: 15px;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.input-group label {
+  margin-bottom: 6px;
+  font-size: 17px;
+  align-self: flex-start;
+  margin-left: 7.5%;
+  color: #7e7e7e;
+}
+
+.input-group input {
+  height: 40px;
+  width: 80%;
+  padding: 0 12px;
+  font-size: 15px;
+  border: 2px solid #dfdede;
+  border-radius: 6px;
+  outline: none;
+  margin-bottom: 20px;
+}
+
+#btn-group {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#btn-group button {
+  width: 85.5%;
+  display: block;
+  margin: 0 auto;
+  height: 45px;
+  background: rgb(27, 106, 175);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+#btn-group button:hover {
+  background-color: rgb(11, 83, 137);
+}
+
+#sign-in {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 400;
+  margin-bottom: 20px;
+}
+#sign-in p {
+  margin: 0;
+  color: #7e7e7e;
+}
+
+#sign-in a {
+  color: rgb(100, 117, 225);
+  text-decoration-line: none;
+}