From 24a1b0bac4826c5b14a7c39a9e03c686ae5da56c Mon Sep 17 00:00:00 2001
From: Evelyn Sucitro <eevelynsucitro@gmail.com>
Date: Mon, 24 Nov 2025 13:33:17 +0700
Subject: [PATCH] Update

---
 API Register.js |  3 +++
 Login.css       | 60 ++++++++++++++++++++++++++-----------------------
 Register.css    | 40 +++++++++++++++++++++++++++++++++
 Register.html   | 57 ++++++++++++++++++++++++----------------------
 4 files changed, 105 insertions(+), 55 deletions(-)

diff --git a/API Register.js b/API Register.js
index 00d3a43..d18fe6c 100644
--- a/API Register.js	
+++ b/API Register.js	
@@ -12,6 +12,9 @@ export async function registerRequest(username, password) {
     try {
         const response = await fetch(`${BASE_URL}Register.php`, {
             method: "POST",
+            headers: {
+                "Accept": "application/json"
+            },
             body: formData
         });
         return await response.json();
diff --git a/Login.css b/Login.css
index c8f6e48..a27ad35 100644
--- a/Login.css
+++ b/Login.css
@@ -270,40 +270,44 @@ input::placeholder {
     }
 }
 
-@media (max-width: 768px) {
-    .container {
-        padding: 40px 30px;
-        width: 95%;
-    }
+/* Autocomplete/Datalist Styling */
+input::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+}
 
-    h1 {
-        font-size: 1.6rem;
-        letter-spacing: 2px;
-        margin-bottom: 30px;
-    }
+/* Styling untuk browser autocomplete */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+    -webkit-text-fill-color: #fff;
+    -webkit-box-shadow: 0 0 0px 1000px rgba(50, 50, 70, 0.5) inset;
+    transition: background-color 5000s ease-in-out 0s;
+    border: 2px solid rgba(100, 100, 120, 0.3);
+}
 
-    input {
-        padding: 12px 16px;
-        font-size: 15px;
-    }
+input:-webkit-autofill:focus {
+    border-color: #00d9ff;
+}
 
-    .btn {
-        padding: 13px;
-        font-size: 16px;
-        letter-spacing: 1.5px;
-    }
+/* Styling untuk datalist dropdown - terbatas karena browser restrictions */
+datalist {
+    background-color: rgba(30, 0, 50, 0.95);
+}
 
-    .register-link {
-        font-size: 13px;
-    }
+option {
+    background-color: rgba(30, 0, 50, 0.95);
+    color: #fff;
+    padding: 10px;
+}
 
-    .modal-content {
-        padding: 30px 25px;
-    }
+/* Untuk Firefox */
+input::-moz-list-thumbnail {
+    background-color: rgba(30, 0, 50, 0.95);
+}
 
-    .modal-content h2 {
-        font-size: 1.5rem;
-    }
+/* Custom styling untuk dropdown suggestion */
+input[list]::-webkit-list-button {
+    color: #00d9ff;
 }
 
 @media (max-width: 480px) {
diff --git a/Register.css b/Register.css
index 6e061de..7a5cb53 100644
--- a/Register.css
+++ b/Register.css
@@ -246,6 +246,46 @@ input::placeholder {
     box-shadow: 0 0 30px #00eaff;
 }
 
+/* Autocomplete/Datalist Styling */
+input::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+}
+
+/* Styling untuk browser autocomplete */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+    -webkit-text-fill-color: #fff;
+    -webkit-box-shadow: 0 0 0px 1000px rgba(50, 50, 70, 0.5) inset;
+    transition: background-color 5000s ease-in-out 0s;
+    border: 2px solid rgba(100, 100, 120, 0.3);
+}
+
+input:-webkit-autofill:focus {
+    border-color: #00d9ff;
+}
+
+/* Styling untuk datalist dropdown - terbatas karena browser restrictions */
+datalist {
+    background-color: rgba(30, 0, 50, 0.95);
+}
+
+option {
+    background-color: rgba(30, 0, 50, 0.95);
+    color: #fff;
+    padding: 10px;
+}
+
+/* Untuk Firefox */
+input::-moz-list-thumbnail {
+    background-color: rgba(30, 0, 50, 0.95);
+}
+
+/* Custom styling untuk dropdown suggestion */
+input[list]::-webkit-list-button {
+    color: #00d9ff;
+}
+
 /* Responsive */
 @media (max-width: 480px) {
     .container {
diff --git a/Register.html b/Register.html
index fef496a..55513cf 100644
--- a/Register.html
+++ b/Register.html
@@ -12,36 +12,39 @@
     <div class="container">
       <h1>REGISTER</h1>
 
-      <form id="registerForm">
-        <div class="input-group">
-          <input
-            type="text"
-            id="username"
-            placeholder="Username"
-            required
-          />
-        </div>
+    <form id="registerForm">
+    <div class="input-group">
+      <input
+        type="text"
+        id="username"
+        name="username"
+        placeholder="Username"
+        required
+      />
+    </div>
 
-        <div class="input-group">
-          <input
-            type="password"
-            id="password"
-            placeholder="Password"
-            required
-          />
-        </div>
+    <div class="input-group">
+      <input
+        type="password"
+        id="password"
+        name="password"
+        placeholder="Password"
+        required
+      />
+    </div>
 
-        <div class="input-group">
-          <input
-            type="password"
-            id="confirmPassword"
-            placeholder="Confirm Password"
-            required
-          />
-        </div>
+    <div class="input-group">
+      <input
+        type="password"
+        id="confirmPassword"
+        name="confirmPassword"
+        placeholder="Confirm Password"
+        required
+      />
+    </div>
 
-        <button type="submit" class="btn">Register</button>
-      </form>
+    <button type="submit" class="btn">Register</button>
+    </form>
 
       <div class="register-link">
         Already Have An Account?