From 39c7ddb77ccb0303792c5cd8942f2871df1e5ef3 Mon Sep 17 00:00:00 2001 From: Pujan Sarkar <144250917+Pujan-sarkar@users.noreply.github.com> Date: Wed, 19 Jun 2024 18:46:42 +0530 Subject: [PATCH] Added Order Cancellation Form (#949) --- .../Forms/Order-Cancellation-Form/index.html | 107 ++++++++++++++++ .../Forms/Order-Cancellation-Form/script.js | 13 ++ .../Forms/Order-Cancellation-Form/style.css | 117 ++++++++++++++++++ assets/html_files/forms.html | 13 ++ 4 files changed, 250 insertions(+) create mode 100644 Components/Forms/Order-Cancellation-Form/index.html create mode 100644 Components/Forms/Order-Cancellation-Form/script.js create mode 100644 Components/Forms/Order-Cancellation-Form/style.css diff --git a/Components/Forms/Order-Cancellation-Form/index.html b/Components/Forms/Order-Cancellation-Form/index.html new file mode 100644 index 00000000..21a424c2 --- /dev/null +++ b/Components/Forms/Order-Cancellation-Form/index.html @@ -0,0 +1,107 @@ + + + + + + + Order Cancellation Form + + +
+

Order Cancellation Form

+
+
+

Customer Information

+ + + + + + + + + + + +
+ +
+

Order Information

+ + + + + + + + + + + +
+ +
+

Cancellation Details

+ + + + + +
+ +
+

Refund Information

+ + + + +
+ +
+

Customer Agreement

+

I hereby request the cancellation of the order as specified above. I understand that the processing of this cancellation request will be in accordance with the seller’s cancellation and refund policies.

+ + + + + + +
+ + +
+
+ + + + diff --git a/Components/Forms/Order-Cancellation-Form/script.js b/Components/Forms/Order-Cancellation-Form/script.js new file mode 100644 index 00000000..a80336a5 --- /dev/null +++ b/Components/Forms/Order-Cancellation-Form/script.js @@ -0,0 +1,13 @@ +document.getElementById('refundMethod').addEventListener('change', function () { + const bankDetails = document.getElementById('bankDetails'); + if (this.value === 'bank-transfer') { + bankDetails.style.display = 'block'; + } else { + bankDetails.style.display = 'none'; + } +}); + +document.getElementById('cancellationForm').addEventListener('submit', function (e) { + e.preventDefault(); + alert('Order cancellation request submitted successfully.'); +}); diff --git a/Components/Forms/Order-Cancellation-Form/style.css b/Components/Forms/Order-Cancellation-Form/style.css new file mode 100644 index 00000000..bf599242 --- /dev/null +++ b/Components/Forms/Order-Cancellation-Form/style.css @@ -0,0 +1,117 @@ +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(to right, #4facfe, #00f2fe); + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: flex-start; /* Changed alignment */ + min-height: 100vh; + padding-top: 20px; /* Added padding to top */ +} + +.container { + max-width: 800px; + margin: 20px; /* Adjusted margin */ + background-color: #fff; + padding: 30px; /* Increased padding for better spacing */ + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + border-radius: 10px; /* Slightly increased border-radius */ +} + +h1 { + text-align: center; + color: #333; + font-size: 28px; + margin-bottom: 20px; /* Added spacing below the heading */ + font-weight: 700; + text-transform: uppercase; +} + +section { + margin-bottom: 20px; +} + +h2 { + border-bottom: 2px solid #007BFF; + padding-bottom: 5px; + color: #007BFF; + font-size: 20px; + margin-bottom: 10px; /* Added spacing below the section heading */ +} + +label { + display: block; + margin-top: 10px; + font-weight: bold; + color: #555; /* Darker label color for better contrast */ +} + +input[type="text"], +input[type="email"], +input[type="tel"], +input[type="date"], +textarea, +select { + width: calc(100% - 20px); + padding: 10px; + margin-top: 5px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 16px; + background-color: #f9f9f9; /* Slight background color for inputs */ +} + +textarea { + resize: vertical; +} + +button { + display: block; + width: 100%; + padding: 15px; + background-color: #007BFF; + color: #fff; + border: none; + border-radius: 4px; + font-size: 18px; + cursor: pointer; + margin-top: 20px; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #0056b3; +} + +@media (max-width: 600px) { + .container { + padding: 15px; + } + + h1 { + font-size: 24px; + } + + h2 { + font-size: 18px; + } + + label { + font-size: 14px; + } + + input[type="text"], + input[type="email"], + input[type="tel"], + input[type="date"], + textarea, + select { + font-size: 14px; + } + + button { + padding: 12px; + font-size: 16px; + } +} diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html index 1b91b6c2..244b2e59 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -333,6 +333,19 @@

OTP Verification Form

+
+

Order Cancellation Form

+
+ + + +
+
+ + + +
+

Payment Form