added contact page
This commit is contained in:
chark1es
parent
69359e8980
commit
445bc39b9e
4 changed files with 1220 additions and 4 deletions
880
package-lock.json
generated
880
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -30,6 +30,7 @@
|
|||
"typescript": "^5.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@types/jquery": "^3.5.29",
|
||||
"sass": "^1.70.0"
|
||||
}
|
||||
|
|
|
|||
341
src/pages/contact.astro
Normal file
341
src/pages/contact.astro
Normal file
|
|
@ -0,0 +1,341 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div
|
||||
class="bg-ieee h-[35em] rounded-b-[10%] my-auto flex flex-col items-center justify-center bg-blend-overlay bg-no-repeat bg-cover align-center bg-center"
|
||||
style="background-image: url('/backgrounds/fa21qp.png');"
|
||||
>
|
||||
<!-- BLUE BG -->
|
||||
<div class="flex flex-col items-center justify-center text-center">
|
||||
<div class="text-[3.2em] text-white font-bold mb-4 w-[11em]">
|
||||
Need to reach out? Fill out the form below!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
|
||||
<div
|
||||
class="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
class="relative left-1/2 -z-10 aspect-[1155/678] w-[36.125rem] max-w-none -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-40rem)] sm:w-[72.1875rem]"
|
||||
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
<h2
|
||||
class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"
|
||||
>
|
||||
Contact Form
|
||||
</h2>
|
||||
<p class="mt-2 text-lg leading-8 text-gray-600">
|
||||
Make sure you fill out the required fields. Double check to make
|
||||
sure all the information is correct before submitting!
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
action="#"
|
||||
method="POST"
|
||||
class="mx-auto mt-16 max-w-xl sm:mt-12"
|
||||
id="contactForm"
|
||||
>
|
||||
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<label
|
||||
for="first-name"
|
||||
class="block text-sm font-semibold leading-6 text-gray-900"
|
||||
>First name</label
|
||||
>
|
||||
<div class="mt-2.5">
|
||||
<input
|
||||
type="text"
|
||||
name="first-name"
|
||||
id="first-name"
|
||||
autocomplete="given-name"
|
||||
required
|
||||
maxlength="1024"
|
||||
class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="last-name"
|
||||
class="block text-sm font-semibold leading-6 text-gray-900"
|
||||
>Last name</label
|
||||
>
|
||||
<div class="mt-2.5">
|
||||
<input
|
||||
type="text"
|
||||
name="last-name"
|
||||
id="last-name"
|
||||
autocomplete="family-name"
|
||||
required
|
||||
maxlength="1024"
|
||||
class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-2">
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-semibold leading-6 text-gray-900"
|
||||
>Email</label
|
||||
>
|
||||
<div class="mt-2.5">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="email"
|
||||
autocomplete="email"
|
||||
required
|
||||
maxlength="1024"
|
||||
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
|
||||
class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label
|
||||
for="phone-number"
|
||||
class="block text-sm font-semibold leading-6 text-gray-900"
|
||||
>Phone number</label
|
||||
>
|
||||
<div class="relative mt-2.5">
|
||||
<input
|
||||
type="tel"
|
||||
name="phone-number"
|
||||
id="phone-number"
|
||||
autocomplete="tel"
|
||||
required
|
||||
maxlength="16"
|
||||
pattern="\+?[0-9]{1,3}?[-. ]?[0-9]{2,3}?[-. ]?[0-9]{3,4}?[-. ]?[0-9]{3,4}"
|
||||
class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label
|
||||
for="subject"
|
||||
class="block text-sm font-semibold leading-6 text-gray-900"
|
||||
>Subject</label
|
||||
>
|
||||
<div class="mt-2.5">
|
||||
<input
|
||||
type="text"
|
||||
name="subject"
|
||||
id="subject"
|
||||
autocomplete="subject"
|
||||
required
|
||||
maxlength="1024"
|
||||
class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label
|
||||
for="message"
|
||||
class="block text-sm font-semibold leading-6 text-gray-900"
|
||||
>Message</label
|
||||
>
|
||||
<div class="mt-2.5">
|
||||
<textarea
|
||||
name="message"
|
||||
id="message"
|
||||
rows="4"
|
||||
required
|
||||
maxlength="1024"
|
||||
class="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-ieee sm:text-sm sm:leading-6"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-x-4 sm:col-span-2">
|
||||
<div class="flex h-6 items-center">
|
||||
<!-- Enabled: "bg-[#0072b5]", Not Enabled: "bg-gray-200" -->
|
||||
<button
|
||||
type="button"
|
||||
class="bg-gray-200 flex w-8 flex-none cursor-pointer rounded-full p-px ring-1 ring-inset ring-gray-900/5 transition-colors duration-200 ease-in-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ieee"
|
||||
role="switch"
|
||||
aria-checked="false"
|
||||
aria-labelledby="switch-1-label"
|
||||
>
|
||||
<span class="sr-only">Agree to policies</span>
|
||||
<!-- Enabled: "translate-x-3.5", Not Enabled: "translate-x-0" -->
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="translate-x-0 h-4 w-4 transform rounded-full bg-white shadow-sm ring-1 ring-gray-900/5 transition duration-200 ease-in-out"
|
||||
></span>
|
||||
</button>
|
||||
</div>
|
||||
<label
|
||||
class="text-sm leading-6 text-gray-600"
|
||||
id="switch-1-label"
|
||||
>
|
||||
By selecting this, you agree to our
|
||||
<a
|
||||
href="https://www.ieee.org/security-privacy.html"
|
||||
class="font-semibold text-ieee"
|
||||
>privacy policy</a
|
||||
>.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<button
|
||||
type="submit"
|
||||
id="policyAgree"
|
||||
class="block w-full rounded-md bg-ieee px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-[#0072b5] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ieee"
|
||||
>Submit to IEEE @ UCSD</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { PUBLIC_DISCORD_WEBHOOK_LINK } = import.meta.env;
|
||||
const { PUBLIC_SLACK_WEBHOOK_LINK } = import.meta.env;
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const form = document.getElementById("contactForm");
|
||||
const policyAgreeButton = document.querySelector(
|
||||
'button[role="switch"]'
|
||||
);
|
||||
let policyAgreed = false;
|
||||
|
||||
// Toggle privacy policy agreement
|
||||
policyAgreeButton.addEventListener("click", function () {
|
||||
policyAgreed = !policyAgreed;
|
||||
this.setAttribute("aria-checked", policyAgreed);
|
||||
const indicator = this.querySelector(
|
||||
'span[aria-hidden="true"]'
|
||||
);
|
||||
if (policyAgreed) {
|
||||
this.classList.replace("bg-gray-200", "bg-ieee");
|
||||
indicator.classList.replace(
|
||||
"translate-x-0",
|
||||
"translate-x-3.5"
|
||||
);
|
||||
} else {
|
||||
this.classList.replace("bg-ieee", "bg-gray-200");
|
||||
indicator.classList.replace(
|
||||
"translate-x-3.5",
|
||||
"translate-x-0"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
form.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
if (!policyAgreed) {
|
||||
alert("Please agree to the privacy policy.");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(form);
|
||||
const formProps = Object.fromEntries(formData);
|
||||
|
||||
const discordPayload = {
|
||||
content: "New contact form submission",
|
||||
embeds: [
|
||||
{
|
||||
title: "Contact Form Submission",
|
||||
color: 25243,
|
||||
fields: [
|
||||
{
|
||||
name: "First Name",
|
||||
value: formProps["first-name"],
|
||||
inline: true,
|
||||
},
|
||||
{
|
||||
name: "Last Name",
|
||||
value: formProps["last-name"],
|
||||
inline: true,
|
||||
},
|
||||
{ name: "Email", value: formProps["email"] },
|
||||
{
|
||||
name: "Phone Number",
|
||||
value: formProps["phone-number"],
|
||||
},
|
||||
{
|
||||
name: "Subject",
|
||||
value: formProps["subject"],
|
||||
},
|
||||
{
|
||||
name: "Message",
|
||||
value: formProps["message"],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Slack payload may need to be adjusted depending on your Slack app's requirements
|
||||
const slackPayload = {
|
||||
text: "New contact form submission",
|
||||
attachments: [
|
||||
{
|
||||
color: "#36a64f",
|
||||
fields: [
|
||||
{
|
||||
title: "Name",
|
||||
value: `${formProps["first-name"]} ${formProps["last-name"]}`,
|
||||
short: true,
|
||||
},
|
||||
{
|
||||
title: "Email",
|
||||
value: formProps["email"],
|
||||
short: true,
|
||||
},
|
||||
{
|
||||
title: "Phone Number",
|
||||
value: formProps["phone-number"],
|
||||
},
|
||||
{
|
||||
title: "Subject",
|
||||
value: formProps["subject"],
|
||||
},
|
||||
{
|
||||
title: "Message",
|
||||
value: formProps["message"],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Promise.all([
|
||||
fetch(PUBLIC_DISCORD_WEBHOOK_LINK, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(discordPayload),
|
||||
}),
|
||||
fetch(PUBLIC_SLACK_WEBHOOK_LINK, {
|
||||
method: "POST",
|
||||
|
||||
body: JSON.stringify(slackPayload),
|
||||
}),
|
||||
])
|
||||
.then((responses) => {
|
||||
// Check all responses are ok (could refine to check each individually)
|
||||
if (responses.every((response) => response.ok)) {
|
||||
alert("Form submitted successfully.");
|
||||
form.reset(); // Reset form fields after successful submission
|
||||
// Reset the policy button
|
||||
policyAgreeButton.click(); // This toggles it off
|
||||
} else {
|
||||
alert("Failed to submit form. Please try again.");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
alert("An error occurred. Please try again.");
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</Layout>
|
||||
|
|
@ -11,5 +11,5 @@ export default {
|
|||
"editor.quickSuggestions": {
|
||||
strings: "on",
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [require("@tailwindcss/forms")],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue