From 01fadc2ccf724c5ef14a518e9f917c4df2d70e0d Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Mon, 16 Sep 2024 16:44:30 +0200 Subject: [PATCH] Tried to add the contact form --> js is not working atm --- py/static/contact.js | 26 +++++++++++++++++++ py/static/styles.css | 43 ++++++++++++++++++++++++++++++- py/templates/contact.html | 53 +++++++++++++++++++++++++++++++-------- py/templates/faq.html | 30 ++++++++++++++++++++++ py/templates/index.html | 6 ++--- 5 files changed, 143 insertions(+), 15 deletions(-) create mode 100644 py/static/contact.js diff --git a/py/static/contact.js b/py/static/contact.js new file mode 100644 index 0000000..c42a463 --- /dev/null +++ b/py/static/contact.js @@ -0,0 +1,26 @@ + +document.addEventListener('DOMContentLoaded', function() { + const contactForm = document.getElementById('contactForm'); + + if (contactForm) { + contactForm.addEventListener('submit', function(event) { + event.preventDefault(); // Prevent the form from submitting the traditional way + + // Generate a random ticket number + const ticketNumber = Math.floor(Math.random() * 1000000); // Generates a random number between 0 and 999999 + + // Retrieve form values + const name = encodeURIComponent(document.getElementById('name').value); + const email = encodeURIComponent(document.getElementById('email').value); + const message = encodeURIComponent(document.getElementById('message').value); + + // Construct the mailto link + const subject = `Support Ticket #${ticketNumber}`; + const body = `Name: ${name}%0AEmail: ${email}%0AMessage:%0A${message}`; + const mailtoLink = `mailto:example@example.com?subject=${subject}&body=${body}`; + + // Open the default mail client + window.location.href = mailtoLink; + }); + } +}); diff --git a/py/static/styles.css b/py/static/styles.css index 42a29bc..be1f9aa 100644 --- a/py/static/styles.css +++ b/py/static/styles.css @@ -249,4 +249,45 @@ header a:hover { } .input button:hover { background-color: var(--input-button-hover-color); -} \ No newline at end of file +} + +/* Form styling */ +form { + max-width: 600px; + margin: 0 auto; + background: var(--input-background-color); /* Use the input background color variable */ + padding: 20px; + border-radius: 2em; /* Match the border radius used in other sections */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */ +} + +form label { + color: var(--text-color); /* Use the text color variable */ + display: block; /* Ensure labels are block elements */ + margin-bottom: 5px; /* Add some space below labels */ +} + +form input, +form textarea { + color: var(--text-color); /* Use the text color variable */ + background-color: var(--history-background-color); /* Use a contrasting background */ + border: 1px solid var(--input-button-color); /* Use the input button color for borders */ + border-radius: 4px; + width: 100%; + padding: 10px; + margin-bottom: 15px; +} + +form button { + background-color: var(--input-button-color); /* Use the input button color */ + color: var(--background-color); /* Use the background color for text */ + border: none; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s; /* Smooth transition for hover effect */ +} + +form button:hover { + background-color: var(--input-button-hover-color); /* Use the hover color variable */ +} diff --git a/py/templates/contact.html b/py/templates/contact.html index a323ebc..251aea7 100644 --- a/py/templates/contact.html +++ b/py/templates/contact.html @@ -1,13 +1,44 @@ - - + + - - - - - AI Assistant - - + + + + + AI Assistant + + + +
+ +
+
+

Contact Us

+

This contact form has an invalid mail until our mailserver is configured

+
+ + - - \ No newline at end of file + + + + + + + +
+
+ + diff --git a/py/templates/faq.html b/py/templates/faq.html index e69de29..ee87cc0 100644 --- a/py/templates/faq.html +++ b/py/templates/faq.html @@ -0,0 +1,30 @@ + + + + + + + + AI Assistant + + + +
+ +
+ + + + diff --git a/py/templates/index.html b/py/templates/index.html index 38514f1..05ac801 100644 --- a/py/templates/index.html +++ b/py/templates/index.html @@ -12,15 +12,15 @@