Skip to content

Commit

Permalink
fixing preload & clean popup modle
Browse files Browse the repository at this point in the history
  • Loading branch information
YueSteveYin committed Sep 17, 2024
1 parent 971dd0e commit 5ce389f
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 238 deletions.
19 changes: 8 additions & 11 deletions layouts/_default/baseof.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,14 @@
href="/css/fonts/montserrat-v25/montserrat-v25-latin-regular.woff2"
crossorigin
/>
<link rel="preload" href="/img/background/bodyBackground.webp" as="image" />
<link
rel="preload"
href="/img/background/titleBackground.webp"
as="image"
/>
<link
rel="preload"
href="/img/background/personBackground.webp"
as="image"
/>
{{ if .IsHome }}
<!-- Preload images for the homepage -->
<link rel="preload" href="/img/background/bodyBackground.webp" as="image" />
<link rel="preload" href="/img/background/titleBackground.webp" as="image" />
{{ else }}
<!-- Preload image for other pages -->
<link rel="preload" href="/img/background/personBackground.webp" as="image" />
{{ end }}

{{ $cssTW := resources.Get "css/main.css" }}
{{ $css := $cssTW | resources.PostCSS (dict "inlineImports" true) }}
Expand Down
116 changes: 1 addition & 115 deletions layouts/_default/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -93,121 +93,7 @@ <h1>
</a>

<!-- Popup Modal -->
<div
x-show="showModal"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-cloak
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
@click="showModal = false"
>
<div
class="transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:w-full sm:max-w-lg"
@click.stop
>
<div class="bg-gray px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button
@click="showModal = false"
type="button"
class="bg-red-600 hover:bg-red-700 focus:ring-red-500 mt-3 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
>
Close
</button>
</div>
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-black">Contact Us</h3>
<div class="mt-2">
<form>
<div class="mb-4">
<label
for="name"
class="text-gray-700 block text-sm font-medium"
>Name</label
>
<input
type="text"
name="name"
id="name"
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
/>
</div>
<div class="mb-4">
<label
for="email"
class="text-gray-700 block text-sm font-medium"
>Email</label
>
<input
type="email"
name="email"
id="email"
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
/>
</div>
<div class="mb-4">
<label
for="message"
class="text-gray-700 block text-sm font-medium"
>Message</label
>
<textarea
id="message"
name="message"
rows="4"
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
></textarea>
</div>
<div class="flex justify-end">
<button
type="submit"
class="focus:ring-blue-500 mt-3 inline-flex w-full justify-center rounded-md border border-transparent bg-gray px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
>
Send
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function submitForm(event) {
event.preventDefault();

let formData = {
name: document.getElementById("name").value,
email: document.getElementById("email").value,
message: document.getElementById("message").value,
};

fetch(
"https://script.google.com/macros/s/AKfycbwlZYbDFD3_lT9q6UJSCk46rsVLXal5jhys3aFYQBCQEvCqIqUR5pN4lsn7vmqvPF7-/exec",
{
// Replace with your Google Apps Script Web App URL
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
},
)
.then((response) => response.json())
.then((data) => {
console.log("Success:", data);
alert("Your message has been sent successfully!");
})
.catch((error) => {
console.error("Error:", error);
alert("Failed to send your message.");
});
}

document.querySelector("form").addEventListener("submit", submitForm);
</script>
{{ partial "contactus-box.html" . }}
</section>

<style>
Expand Down
116 changes: 116 additions & 0 deletions layouts/partials/contactus-box.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<!-- layouts/partials/modal.html -->
<div
x-show="showModal"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-cloak
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
@click="showModal = false"
>
<div
class="transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:w-full sm:max-w-lg"
@click.stop
>
<div class="bg-gray px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button
@click="showModal = false"
type="button"
class="bg-red-600 hover:bg-red-700 focus:ring-red-500 mt-3 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
>
Close
</button>
</div>
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-black">Contact Us</h3>
<div class="mt-2">
<form>
<div class="mb-4">
<label
for="name"
class="text-gray-700 block text-sm font-medium"
>Name</label
>
<input
type="text"
name="name"
id="name"
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
/>
</div>
<div class="mb-4">
<label
for="email"
class="text-gray-700 block text-sm font-medium"
>Email</label
>
<input
type="email"
name="email"
id="email"
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
/>
</div>
<div class="mb-4">
<label
for="message"
class="text-gray-700 block text-sm font-medium"
>Message</label
>
<textarea
id="message"
name="message"
rows="4"
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
></textarea>
</div>
<div class="flex justify-end">
<button
type="submit"
class="focus:ring-blue-500 mt-3 inline-flex w-full justify-center rounded-md border border-transparent bg-gray px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
>
Send
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function submitForm(event) {
event.preventDefault();

let formData = {
name: document.getElementById("name").value,
email: document.getElementById("email").value,
message: document.getElementById("message").value,
};

fetch(
"https://script.google.com/macros/s/AKfycbwlZYbDFD3_lT9q6UJSCk46rsVLXal5jhys3aFYQBCQEvCqIqUR5pN4lsn7vmqvPF7-/exec",
{
// Replace with your Google Apps Script Web App URL
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
},
)
.then((response) => response.json())
.then((data) => {
console.log("Success:", data);
alert("Your message has been sent successfully!");
})
.catch((error) => {
console.error("Error:", error);
alert("Failed to send your message.");
});
}

document.querySelector("form").addEventListener("submit", submitForm);
</script>
113 changes: 1 addition & 112 deletions layouts/partials/nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -139,117 +139,6 @@
</div>

<!-- Popup Modal -->
<div
x-show="showModal"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-cloak
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
@click="showModal = false"
>
<div
class="transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:w-full sm:max-w-lg"
@click.stop
>
<div class="bg-gray px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button
@click="showModal = false"
type="button"
class="bg-red-600 hover:bg-red-700 focus:ring-red-500 mt-3 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
>
Close
</button>
</div>
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-black">Contact Us</h3>
<div class="mt-2">
<form>
<div class="mb-4">
<label
for="name"
class="text-gray-700 block text-sm font-medium"
>Name</label
>
<input
type="text"
name="name"
id="name"
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
/>
</div>
<div class="mb-4">
<label
for="email"
class="text-gray-700 block text-sm font-medium"
>Email</label
>
<input
type="email"
name="email"
id="email"
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
/>
</div>
<div class="mb-4">
<label
for="message"
class="text-gray-700 block text-sm font-medium"
>Message</label
>
<textarea
id="message"
name="message"
rows="4"
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
></textarea>
</div>
<div class="flex justify-end">
<button
type="submit"
class="focus:ring-blue-500 mt-3 inline-flex w-full justify-center rounded-md border border-transparent bg-gray px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
>
Send
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function submitForm(event) {
event.preventDefault();

let formData = {
name: document.getElementById("name").value,
email: document.getElementById("email").value,
message: document.getElementById("message").value,
};

fetch("YOUR_WEB_APP_URL", {
// Replace with your Google Apps Script Web App URL
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
})
.then((response) => response.json())
.then((data) => {
console.log("Success:", data);
alert("Your message has been sent successfully!");
})
.catch((error) => {
console.error("Error:", error);
alert("Failed to send your message.");
});
}

document.querySelector("form").addEventListener("submit", submitForm);
</script>
{{ partial "contactus-box.html" . }}
</nav>
</header>

0 comments on commit 5ce389f

Please sign in to comment.