dwd-projects/teenybeanspreschoolcurriculum.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

index-modal

Browse Source
This commit is contained in:
Suvodip Ghosh
2023-02-22 11:47:28 +05:30
parent 374b1499a4
commit 736b1da167
8 changed files with 899 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/ModalIndex copy 2.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<section class="container mx-auto xl:px-24">
<div class="flex md:justify-center justify-center hero-text font-bold mt-8 text-color-1 py-14">Discover our solutions</div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center ">
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/plan.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
<button @click="showAbModal('abModal')" class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/report.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
<a target="_blank" href="/lesson-plan/dailyplan"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/classroom.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
<p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
<a target="_blank" href="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 mt-12">
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/popular.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
<p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
<a target="_blank" href="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/event.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
<p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
<a target="_blank" href="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/plan.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<!-- <template>
<div>
<div @click="showAbModal('abModal')"> Show Modal</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div>
Modal text Modal text Modal text<br> Modal text Modal text Modal text
</div>
</div>
</div>
</div>
</template> -->
<script>
export default {
data() {
return {
abModal:false,
abID:''
}
},
methods: {
showAbModal(abID){
this.abModal=true
this.abID=abID
},
hideAbModal(){
this.abModal=false
// // this.abID=abID
},
doNothing(){
// alert();
}
},
mounted: function () {
// this.getVideos()
}
}
</script>
<style scoped>
.abModal {
/* display: none; */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: aliceblue;
padding: 20px;
border: 1px solid #888;
width: 80%;
margin: 0 auto;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>

138
src/components/ModalIndex.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<section class="container mx-auto xl:px-24">
<div class="flex md:justify-center justify-center hero-text font-bold mt-8 text-color-1 py-14">Discover our solutions</div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center ">
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/plan.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
<button @click="showAbModal('abModal')" class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/report.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
<a target="_blank" href="/lesson-plan/dailyplan"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/classroom.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
<p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
<a target="_blank" href="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 mt-12">
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/popular.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
<p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
<a target="_blank" href="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/event.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
<p class=" font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
<a target="_blank" href="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/plan.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<!-- <template>
<div>
<div @click="showAbModal('abModal')"> Show Modal</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div>
Modal text Modal text Modal text<br> Modal text Modal text Modal text
</div>
</div>
</div>
</div>
</template> -->
<script>
export default {
data() {
return {
abModal:false,
abID:''
}
},
methods: {
showAbModal(abID){
this.abModal=true
this.abID=abID
},
hideAbModal(){
this.abModal=false
// // this.abID=abID
},
doNothing(){
// alert();
}
},
mounted: function () {
// this.getVideos()
}
}
</script>
<style scoped>
.abModal {
/* display: none; */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: aliceblue;
padding: 20px;
border: 1px solid #888;
width: 80%;
margin: 0 auto;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>

119
src/components/ModalIndexEventIdeas.vue Normal file
View File

@@ -0,0 +1,119 @@
<template>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/popular.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
<p class="font-20px text-justify text-color-2 line-clamp-3 xl:px-24">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
<a class="pt-2" href="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/popular.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
<p class="text-xl text-justify text-color-2 w-64">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
</div>
</div>
</div>
</div>
</template>
<!-- <template>
<div>
<div @click="showAbModal('abModal')"> Show Modal</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div>
Modal text Modal text Modal text<br> Modal text Modal text Modal text
</div>
</div>
</div>
</div>
</template> -->
<script>
export default {
data() {
return {
abModal:false,
abID:''
}
},
methods: {
showAbModal(abID){
this.abModal=true
this.abID=abID
},
hideAbModal(){
this.abModal=false
// // this.abID=abID
},
doNothing(){
// alert();
}
},
mounted: function () {
// this.getVideos()
}
}
</script>
<style scoped>
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.abModal {
/* display: none; */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
padding-left: 10px;
padding-right: 10px;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: rgb(255, 255, 255);
padding: 20px;
border: 1px solid #888;
width: fit-content;
height: fit-content;
margin: 0 auto;
border-radius: 16px;
border-width: 5px;
border-color: rgb(40, 99, 226);
}
.close {
color: rgb(40, 99, 226);
float: right;
font-size: 28px;
padding: 10px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: rgb(40, 99, 226);
text-decoration: none;
padding: 10px;
cursor: pointer;
font-size: 28px;
background-color: rgb(237, 240, 239);
border-radius: 100%;
}
</style>

120
src/components/ModalIndexLesson.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/report.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
<p class="font-20px text-justify text-color-2 line-clamp-3">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
<a class="pt-2" href="/lesson-plan/dailyplan"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/report.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
<p class="text-xl text-justify text-color-2 w-64">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
</div>
</div>
</div>
</div>
</template>
<!-- <template>
<div>
<div @click="showAbModal('abModal')"> Show Modal</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div>
Modal text Modal text Modal text<br> Modal text Modal text Modal text
</div>
</div>
</div>
</div>
</template> -->
<script>
export default {
data() {
return {
abModal:false,
abID:''
}
},
methods: {
showAbModal(abID){
this.abModal=true
this.abID=abID
},
hideAbModal(){
this.abModal=false
// // this.abID=abID
},
doNothing(){
// alert();
}
},
mounted: function () {
// this.getVideos()
}
}
</script>
<style scoped>
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.abModal {
/* display: none; */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
padding-left: 10px;
padding-right: 10px;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: rgb(255, 255, 255);
padding: 20px;
border: 1px solid #888;
width: fit-content;
height: fit-content;
margin: 0 auto;
border-radius: 16px;
border-width: 5px;
border-color: rgb(40, 99, 226);
}
.close {
color: rgb(40, 99, 226);
float: right;
font-size: 28px;
padding: 10px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: rgb(40, 99, 226);
text-decoration: none;
padding: 10px;
cursor: pointer;
font-size: 28px;
background-color: rgb(237, 240, 239);
border-radius: 100%;
}
</style>

120
src/components/ModalIndexThemes.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/classroom.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
<p class="font-20px text-justify text-color-2 line-clamp-3">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
<a class="pt-2" href="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/classroom.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
<p class="text-xl text-justify text-color-2 w-64">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
</div>
</div>
</div>
</div>
</template>
<!-- <template>
<div>
<div @click="showAbModal('abModal')"> Show Modal</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div>
Modal text Modal text Modal text<br> Modal text Modal text Modal text
</div>
</div>
</div>
</div>
</template> -->
<script>
export default {
data() {
return {
abModal:false,
abID:''
}
},
methods: {
showAbModal(abID){
this.abModal=true
this.abID=abID
},
hideAbModal(){
this.abModal=false
// // this.abID=abID
},
doNothing(){
// alert();
}
},
mounted: function () {
// this.getVideos()
}
}
</script>
<style scoped>
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.abModal {
/* display: none; */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
padding-left: 10px;
padding-right: 10px;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: rgb(255, 255, 255);
padding: 20px;
border: 1px solid #888;
width: fit-content;
height: fit-content;
margin: 0 auto;
border-radius: 16px;
border-width: 5px;
border-color: rgb(40, 99, 226);
}
.close {
color: rgb(40, 99, 226);
float: right;
font-size: 28px;
padding: 10px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: rgb(40, 99, 226);
text-decoration: none;
padding: 10px;
cursor: pointer;
font-size: 28px;
background-color: rgb(237, 240, 239);
border-radius: 100%;
}
</style>

120
src/components/ModalIndexVideos.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/event.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
<p class="font-20px text-justify text-color-2 line-clamp-3 xl:px-24">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
<a class="pt-2" href="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/event.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
<p class="text-xl text-justify text-color-2 w-64">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
</div>
</div>
</div>
</div>
</template>
<!-- <template>
<div>
<div @click="showAbModal('abModal')"> Show Modal</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div>
Modal text Modal text Modal text<br> Modal text Modal text Modal text
</div>
</div>
</div>
</div>
</template> -->
<script>
export default {
data() {
return {
abModal:false,
abID:''
}
},
methods: {
showAbModal(abID){
this.abModal=true
this.abID=abID
},
hideAbModal(){
this.abModal=false
// // this.abID=abID
},
doNothing(){
// alert();
}
},
mounted: function () {
// this.getVideos()
}
}
</script>
<style scoped>
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.abModal {
/* display: none; */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
padding-left: 10px;
padding-right: 10px;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: rgb(255, 255, 255);
padding: 20px;
border: 1px solid #888;
width: fit-content;
height: fit-content;
margin: 0 auto;
border-radius: 16px;
border-width: 5px;
border-color: rgb(40, 99, 226);
}
.close {
color: rgb(40, 99, 226);
float: right;
font-size: 28px;
padding: 10px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: rgb(40, 99, 226);
text-decoration: none;
padding: 10px;
cursor: pointer;
font-size: 28px;
background-color: rgb(237, 240, 239);
border-radius: 100%;
}
</style>

120
src/components/ModalIndexWorksheet.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/plan.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
<p class="font-20px text-justify text-color-2 line-clamp-3">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
<span class="text-blue-700 cursor-pointer font-bold text-left" @click="showAbModal('abModal')">Read More &gt;&gt;</span>
<a class="pt-2" href="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div class="grid place-items-center pb-8 px-6 w-fit h-fit">
<img draggable="false" src="/img/plan.png" alt="">
<h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
<p class="text-xl text-justify text-color-2 w-64">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
</div>
</div>
</div>
</div>
</template>
<!-- <template>
<div>
<div @click="showAbModal('abModal')"> Show Modal</div>
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
<div class="modal-content" @click="doNothing()">
<span @click="hideAbModal" class="close">&times;</span>
<div>
Modal text Modal text Modal text<br> Modal text Modal text Modal text
</div>
</div>
</div>
</div>
</template> -->
<script>
export default {
data() {
return {
abModal:false,
abID:''
}
},
methods: {
showAbModal(abID){
this.abModal=true
this.abID=abID
},
hideAbModal(){
this.abModal=false
// // this.abID=abID
},
doNothing(){
// alert();
}
},
mounted: function () {
// this.getVideos()
}
}
</script>
<style scoped>
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.abModal {
/* display: none; */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
padding-left: 10px;
padding-right: 10px;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: rgb(255, 255, 255);
padding: 20px;
border: 1px solid #888;
width: fit-content;
height: fit-content;
margin: 0 auto;
border-radius: 16px;
border-width: 5px;
border-color: rgb(40, 99, 226);
}
.close {
color: rgb(40, 99, 226);
float: right;
font-size: 28px;
padding: 10px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: rgb(40, 99, 226);
text-decoration: none;
padding: 10px;
cursor: pointer;
font-size: 28px;
background-color: rgb(237, 240, 239);
border-radius: 100%;
}
</style>