generated from dwd/boilarplate-astro-tailwind
work in every pages
This commit is contained in:
dev sp
@@ -1,71 +0,0 @@
|
||||
<main>
|
||||
<div id="contactForm" class="flex flex-col justify-center w-full">
|
||||
<form id="formSection" action="">
|
||||
<p class="text-2xl">Write your Qurie</p>
|
||||
<div class="py-3">
|
||||
<label for="name">Name:<span class=text-red-500>*</span></label>
|
||||
<input 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>
|
||||
<label for="phone">Mobile:<span class=text-red-500>*</span></label>
|
||||
<input 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 class="py-3">
|
||||
<label for="email">E-mail ID:<span class=text-red-500>*</span></label>
|
||||
<input 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/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message">Write your Qurie:<span class=text-red-500>*</span></label>
|
||||
<textarea 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>
|
||||
</div>
|
||||
<div class="">
|
||||
<input type="submit" value="Submit" class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right"/>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex" id="thankYouSection" style="display: none;">
|
||||
<h1 class="text-center text-black text-4xl">Thank You</h1>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script is:inline>
|
||||
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();
|
||||
|
||||
const formData = {
|
||||
name: nameInput.value,
|
||||
email: emailInput.value,
|
||||
mobile: phoneInput.value,
|
||||
message: messageInput.value
|
||||
};
|
||||
console.log("Form Data", formData)
|
||||
const url = 'https://api8.siliconpin.com/items/hps_contact';
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
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>
|
||||
68
src/components/ContactForm.vue
Normal file
68
src/components/ContactForm.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div id="contactForm" class="flex flex-col justify-center w-full">
|
||||
<form @submit="saveFormData" id="formSection" action="">
|
||||
<div v-if="userQurie">
|
||||
<p class="text-2xl">Write your Qurie</p>
|
||||
<div class="py-3">
|
||||
<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/>
|
||||
</div>
|
||||
<div>
|
||||
<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/>
|
||||
</div>
|
||||
<div class="py-3">
|
||||
<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/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="message">Write your Qurie:<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>
|
||||
</div>
|
||||
<div class="">
|
||||
<button class="bg-[#3084b5] text-white rounded-lg py-2.5 px-6 float-right" >Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex" >
|
||||
<h1 class="text-center text-black text-4xl p-16">Thank You</h1>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
name: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
message: "",
|
||||
userQurie: true,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
saveFormData(e){
|
||||
e.preventDefault();
|
||||
let formData = {
|
||||
name: this.name,
|
||||
mobile: this.phone,
|
||||
email: this.email,
|
||||
message: this.message
|
||||
}
|
||||
fetch(`https://api8.siliconpin.com/items/hps_contact`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log("Saved Form Data")
|
||||
})
|
||||
this.userQurie = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
92
src/components/FAQ.vue
Normal file
92
src/components/FAQ.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class="mt-16">
|
||||
<div class="flex flex-col lg:flex-row place-content-between gap-x-4">
|
||||
<div class="flex flex-col w-full">
|
||||
<h1 class="text-[#47ae6a] hero-text font-bold">Frequently Asked <span class="text-[#3084b5]">Questions</span> </h1>
|
||||
<div class="grid h-fit" v-for="data in faqData" :key="data.questionNumber">
|
||||
<details>
|
||||
<summary>
|
||||
<div class="flex inline-flex cursor-pointer">{{ data.question }}</div>
|
||||
</summary>
|
||||
<div v-html="data.answer"></div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center place-items-center">
|
||||
<img class="max-w-lg rounded-full border-2 shadow-xl" src="/img/faq.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
faqData: "",
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
fetch(`/assets/faq.json`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.faqData = data.faqs
|
||||
console.log(this.faqData)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(226, 239, 255) 0%, rgba(255, 255, 255) 40%);}
|
||||
@media screen and (min-width: 1500px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1499px) {
|
||||
.hero-text {
|
||||
font-size: 40px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1199px) {
|
||||
.hero-text {
|
||||
font-size: 30px;
|
||||
|
||||
}
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7c4c23;
|
||||
}
|
||||
details {
|
||||
font-weight: lighter;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
border-color: #d4d4d4;
|
||||
padding: .75em .75em 0;
|
||||
font-size: 17px;
|
||||
width: 100%;
|
||||
/* margin-top: 10px; */
|
||||
/* box-shadow:0 0 8px #d4d4d4; */
|
||||
}
|
||||
|
||||
summary {
|
||||
margin: -.75em -.75em 0;
|
||||
padding: .75em;
|
||||
|
||||
}
|
||||
|
||||
details[open] {
|
||||
padding: .75em;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -10,13 +10,18 @@
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/curriculum">Curriculum</a></li>
|
||||
<!-- <li><a href="#">Solutions</a></li> -->
|
||||
<!-- <li><a href="#">Products</a></li> -->
|
||||
<!-- <li><a href="#">Services</a></li> -->
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
<li><button class="login-button">Login</button></li>
|
||||
<li><button class="join-button">Join</button></li>
|
||||
|
||||
<li><a href="/login">Login</a></li>
|
||||
<li><a href="/sign-up">Signup</a></li>
|
||||
|
||||
<!-- <li><button class="login-button">Login</button></li>
|
||||
<li><button class="join-button">Join</button></li> -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
83
src/components/Slider.vue
Normal file
83
src/components/Slider.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="">
|
||||
<swiper class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
|
||||
:modules="modules"
|
||||
:slides-per-view="1"
|
||||
:space-between="50"
|
||||
navigation
|
||||
pagination
|
||||
:scrollbar="{ draggable: true }"
|
||||
:autoplay=" { delay: 2500, disableOnInteraction: false}"
|
||||
@swiper="onSwiper"
|
||||
@slideChange="onSlideChange">
|
||||
<swiper-slide> <img class="" src="/img/school1.jpg" alt="" /></swiper-slide>
|
||||
<swiper-slide> <img class="" src="/img/school2.jpg" alt="" /></swiper-slide>
|
||||
<swiper-slide> <img class="" src="/img/school3.jpg" alt="" /></swiper-slide>
|
||||
<swiper-slide> <img class="" src="/img/school4.jpg" alt="" /></swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.slider-width {
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Import Swiper Vue.js components
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import { Navigation, Autoplay, Pagination, Scrollbar, A11y, } from 'swiper';
|
||||
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
// const swiper = new Swiper('.swiper', {
|
||||
// autoplay: {
|
||||
// delay: 5000,
|
||||
// },
|
||||
// });
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
setup() {
|
||||
const onSwiper = (swiper) => {
|
||||
// console.log(swiper);
|
||||
};
|
||||
const onSlideChange = () => {
|
||||
// console.log('slide change');
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
onSwiper,
|
||||
onSlideChange,
|
||||
modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
|
||||
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
lessonplan:null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://management.beanstalkedu.com/items/lesson_plan')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.lessonplan = data.data
|
||||
// this.isLoading = false
|
||||
// console.log(this.lessonplan)
|
||||
// return this.page[0].id
|
||||
})
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
83
src/components/SliderHomepage.vue
Normal file
83
src/components/SliderHomepage.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="">
|
||||
<swiper class="max-w-2xl cursor-pointer shadow-xl rounded-2xl" draggable="false"
|
||||
:modules="modules"
|
||||
:slides-per-view="1"
|
||||
:space-between="50"
|
||||
navigation
|
||||
pagination
|
||||
:scrollbar="{ draggable: true }"
|
||||
:autoplay=" { delay: 2500, disableOnInteraction: false}"
|
||||
@swiper="onSwiper"
|
||||
@slideChange="onSlideChange">
|
||||
<swiper-slide> <img class="" src="/img/school1.jpg" alt="" /></swiper-slide>
|
||||
<swiper-slide> <img class="" src="/img/school2.jpg" alt="" /></swiper-slide>
|
||||
<swiper-slide> <img class="" src="/img/school3.jpg" alt="" /></swiper-slide>
|
||||
<swiper-slide> <img class="" src="/img/school4.jpg" alt="" /></swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.slider-width {
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Import Swiper Vue.js components
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import { Navigation, Autoplay, Pagination, Scrollbar, A11y, } from 'swiper';
|
||||
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
// const swiper = new Swiper('.swiper', {
|
||||
// autoplay: {
|
||||
// delay: 5000,
|
||||
// },
|
||||
// });
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
setup() {
|
||||
const onSwiper = (swiper) => {
|
||||
// console.log(swiper);
|
||||
};
|
||||
const onSlideChange = () => {
|
||||
// console.log('slide change');
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
onSwiper,
|
||||
onSlideChange,
|
||||
modules: [Navigation, Autoplay, Pagination, Scrollbar, A11y],
|
||||
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
lessonplan:null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://management.beanstalkedu.com/items/lesson_plan')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.lessonplan = data.data
|
||||
// this.isLoading = false
|
||||
// console.log(this.lessonplan)
|
||||
// return this.page[0].id
|
||||
})
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user