dwd-projects
/
holywisdompublicschool.com
generated from dwd/boilarplate-astro-tailwind
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s1

pull/4/head
dev2 siliconpin 2024-07-01 13:37:29 +00:00
parent d88ec02a13
commit 7a704b30b4
4 changed files with 88 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/ContactForm.vue
View File

@ -1,53 +1,63 @@
<template> <template>
<div id="contactForm" class="flex flex-col justify-center w-full"> <div id="contactForm" class="flex flex-col justify-center w-full">
<form @submit="saveFormData" id="formSection" action=""> <form @submit="saveFormData" id="formSection" action="">
<div v-if="userQurie"> <div v-if="userQuery">
<p class="text-2xl">Write your Qurie</p> <p class="text-2xl">Write your Query</p>
<div class="py-3"> <div class="py-3">
<label for="name">Name:<span class=text-red-500>*</span></label> <label for="name">Name:<span class="text-red-500">*</span></label>
<input v-model="name" id="name" name="name" type="text" placeholder="Enter your Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/> <input v-model="name" id="name" name="name" type="text" placeholder="Enter your Name" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
</div> </div>
<div> <div>
<label for="phone">Mobile:<span class=text-red-500>*</span></label> <label for="phone">Mobile:<span class="text-red-500">*</span></label>
<input v-model="phone" id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/> <input v-model="phone" id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
</div> </div>
<div class="py-3"> <div class="py-3">
<label for="email">E-mail ID:<span class=text-red-500>*</span></label> <label for="email">E-mail ID:<span class="text-red-500">*</span></label>
<input v-model="email" id="email" name="email" type="text" placeholder="Enter your E-mail ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required/> <input v-model="email" id="email" name="email" type="email" placeholder="Enter your E-mail ID" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required />
</div> </div>
<div> <div>
<label for="message">Write your Qurie:<span class=text-red-500>*</span></label> <label for="message">Write your Query:<span class="text-red-500">*</span></label>
<textarea v-model="message" id="message" name="message" rows="7" placeholder="Write your Qurie" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required></textarea> <textarea v-model="message" id="message" name="message" rows="7" placeholder="Write your Query" class="border-2 focus:border-[#47ae6a] border-[#3084b5] focus:outline-none rounded-lg w-full p-2" required></textarea>
</div> </div>
<div class=""> <div class="">
<button class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right" >Submit</button> <button class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right">Submit</button>
</div> </div>
</div> </div>
<div v-else class="flex" > <div v-else class="flex">
<h1 class="text-center text-black text-4xl p-16">Thank You</h1> <h1 class="text-center text-black text-4xl p-16">Thank You</h1>
</div> </div>
</form> </form>
</div> </div>
</template> </template>
<script> <script>
export default{ export default {
data(){ data() {
return{ return {
name: "", name: "",
phone: "", phone: "",
email: "", email: "",
message: "", message: "",
userQurie: true, userQuery: true,
domain: 'sample.com', domain: '',
owner: 'Holly Wisdom Public School', owner: 'Holy Wisdom Public School',
referrer: 'Holly Wisdom Public School', referrer: '',
} };
}, },
methods:{
saveFormData(e){ mounted() {
// Assign window-dependent values in mounted hook
if (typeof window !== 'undefined') {
this.domain = window.location.origin;
this.referrer = document.referrer;
}
},
methods: {
saveFormData(e) {
e.preventDefault(); e.preventDefault();
let formData = { let formData = {
data:{ data: {
name: this.name, name: this.name,
phone: this.phone, phone: this.phone,
email: this.email, email: this.email,
@ -56,22 +66,33 @@
owner: this.owner, owner: this.owner,
domain: this.domain, domain: this.domain,
referrer: this.referrer referrer: this.referrer
} };
console.log(formData); // console.log(formData);
fetch(`http://api.siliconpin.com/v3/contact-form-processor/`, fetch(`https://api.siliconpin.com/v3/contact-form-processor/`, {
{
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type' : 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify(formData) body: JSON.stringify(formData)
}) })
.then(response => response.json()) .then(response => response.json())
.then(resData => { .then(resData => {
// console.log("Saved Form resData", resData) console.log("Saved Form resData", resData.success);
if(resData.success === true){
this.userQuery = false;
}
this.clearForm();
}) })
this.userQurie = false; .catch(error => {
console.error("Error:", error);
});
},
clearForm() {
this.name = "";
this.phone = "";
this.email = "";
this.message = "";
} }
} }
} };
</script> </script>

96
src/pages/contact.astro
View File

@ -64,7 +64,6 @@ import Layout from "../layouts/Layout.astro";
</main> </main>
</Layout> </Layout>
<script is:inline> <script is:inline>
document.getElementById('formSection').addEventListener('submit', function(event) { document.getElementById('formSection').addEventListener('submit', function(event) {
event.preventDefault(); event.preventDefault();
@ -75,12 +74,12 @@ import Layout from "../layouts/Layout.astro";
email: document.getElementById('email').value, email: document.getElementById('email').value,
message: document.getElementById('message').value message: document.getElementById('message').value
}, },
owner: 'owner_value', owner: 'Holy Wisdom Public School',
domain: 'domain_value', domain: window.location.origin,
referrer: document.referrer referrer: document.referrer
}; };
fetch('http://192.168.0.166:2053/v3/contact-form-processor/', { fetch('https://api.siliconpin.com/v3/contact-form-processor/', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@ -90,96 +89,25 @@ import Layout from "../layouts/Layout.astro";
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.success) { if (data.success) {
console.log('Data submitted successfully'); // console.log('Data submitted successfully');
if(data.success === true){
document.getElementById('formSection').style.display = 'none';
document.getElementById('thankYouSection').style.display = 'block';
}
console.log(data.success)
} else { } else {
console.log('Error: ' + data.message); // console.log('Error: ' + data.message);
} }
}) })
.catch(error => { .catch(error => {
console.error('Error:', error); // console.error('Error:', error);
console.log('An error occurred while submitting the form'); // console.log('An error occurred while submitting the form');
}); });
}); });
// document.addEventListener('DOMContentLoaded', function () {
// const contactForm = document.getElementById('contactForm');
// const formSection = document.getElementById('formSection');
// const thankYouSection = document.getElementById('thankYouSection');
// const nameInput = document.getElementById('name');
// const emailInput = document.getElementById('email');
// const phoneInput = document.getElementById('phone');
// const messageInput = document.getElementById('message');
// contactForm.addEventListener('submit', async function (event) {
// event.preventDefault();
// let data = {
// data:{
// name: nameInput.value,
// phone: phoneInput.value,
// email: emailInput.value,
// message: messageInput.value
// },
// owner: "Holly Wisdom Public School",
// domain: window.location.origin,
// referrer: "Holly Wisdom Public School"
// }
// console.log("Form Data", data)
// const url = 'https://api.siliconpin.com/v3/contact-form-processor/';
// try {
// const response = await fetch(url, {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify(data)
// });
// if (response.ok) {
// console.log('Form data submitted successfully');
// formSection.style.display = 'none';
// thankYouSection.style.display = 'block';
// } else {
// console.error('Failed to submit form data');
// }
// } catch (error) {
// console.error('An error occurred:', error);
// }
// });
// });
</script> </script>
<style> <style>
.gradintBack { .gradintBack {
background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%); background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
} }
</style> </style>
<!-- function submitForm(){
const formData = {
data: {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
phone: document.getElementById('phone').value
},
owner: document.getElementById('owner').value,
domain: document.getElementById('domain').value,
referrer: document.getElementById('referrer').value
};
fetch(`http://192.168.0.166:2053/v3/contact-form/`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json',
},
body: JSON.stringify(formData)
})
.then(response => {
if(response.ok){
console.log('Form submitted succesfully!');
}else{
console.log('Form submitted faild!');
}
})
.then(error => {
console.error('an error occoured', error);
})
} -->

8
src/pages/curriculum.astro
View File

@ -154,7 +154,7 @@ let inSportsData = [
<main> <main>
<div> <div>
<section class="container-fluid gradintBack"> <section class="container-fluid gradintBack">
<div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center"> <div class="container mx-auto px-4 flex flex-col-reverse xl:flex-row place-items-center gap-y-4">
<div class="w-full"> <div class="w-full">
<img class="lg:max-w-3xl" src="/img/school2.png" alt="" /> <img class="lg:max-w-3xl" src="/img/school2.png" alt="" />
</div> </div>
@ -318,10 +318,10 @@ let inSportsData = [
<div> <div>
<dialog id="formModal" class="max-w-2xl rounded-xl"> <dialog id="formModal" class="max-w-2xl rounded-xl">
<form method="dialog" class=""> <form method="dialog" class="">
<button class="text-3xl text-red-500 bg-[#3084b550] hover:bg-[#3084b580] px-4 py-2 rounded-full float-right">&#10008;</button> <button type="submit" class="text-3xl text-red-500 bg-[#3084b550] hover:bg-[#3084b580] px-4 py-2 rounded-full float-right">&#10008;</button>
<div class=""> <div class="">
<ContactForm client:visible/> <ContactForm client:visible />
</div> </div>
</form> </form>
</dialog> </dialog>
</div> </div>

5
src/pages/index.astro
View File

@ -11,11 +11,10 @@ import FAQ from "../components/FAQ.vue";
<div class="pb-16"> <div class="pb-16">
<section class="container-fluid gradintBack"> <section class="container-fluid gradintBack">
<div <div
class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center" class="container mx-auto px-4 flex flex-col-reverse xl:flex-row place-items-center gap-y-4"
> >
<div class="w-full"> <div class="w-full">
<!-- <img class="lg:max-w-2xl" src="/img/image.png" alt=""> --> <img class="w-full xl:max-w-2xl" src="public/img/school-image-4.png" alt=""
<img class="lg:max-w-2xl" src="public/img/school-image-4.png" alt=""
/> />
</div> </div>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">