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

404-page

master
Suvodip Ghosh 2023-02-25 11:35:32 +05:30
parent 32a7d96579
commit d0acbe1c10
19 changed files with 500 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/dailylLesson-plan.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
public/img/monthly-lesson-plan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 446 KiB

BIN
public/img/number-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 275 KiB

BIN
public/img/uppercase-letter-g.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 250 KiB

BIN
public/img/weekly-lesson-plan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 KiB

12
src/components/Administrators.vue
View File

@ -198,18 +198,18 @@
<form class="grid place-items-center" v-if="rOutQry">
<div class="flex flex-wrap mb-6 justify-center">
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="rOutName" type="text" placeholder="Your Name">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="rOutName" type="text" placeholder="Your Name" required>
</div>
<div class="md:w-1/2 px-3">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="rOutPhone" type="text" placeholder="Your Phone Number">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="rOutPhone" type="text" placeholder="Your Phone Number" required>
</div>
</div>
<div class="flex flex-wrap mb-6 justify-center">
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="rOutEmail" type="email" placeholder="Your E-mail">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="rOutEmail" type="email" placeholder="Your E-mail" required>
</div>
<div class="md:w-1/2 px-3">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="rOutAddress" type="text" placeholder="Your Address">
<input class="appearance-none block md:w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-100" v-model="rOutAddress" type="text" placeholder="Your Address" required>
</div>
</div>
<div class="flex -mt-4"><button @click="saveReachoutQry" class="bg-blue-700 text-lg p-1 text-white px-6 py-2 rounded-tl-lg rounded-br-lg mb-8">Contact Us</button></div>
@ -259,12 +259,12 @@
<h3 class="text-center text-xl lg:text-3xl p-4">You can download the case study here</h3>
<div class="flex flex-wrap mb-6">
<div class="w-full md:w-3/3 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="csName" type="text" placeholder="Your Name">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="csName" id="fullname" type="text" placeholder="Your Name" required>
</div>
</div>
<div class="flex flex-wrap mb-6">
<div class="w-full md:w-3/3 px-3 mb-6 md:mb-0">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="csEmail" type="text" placeholder="Your E-mail Id">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" v-model="csEmail" id="email" type="email" placeholder="Your E-mail Id" required>
</div>
</div>
<div class="flex justify-center -mt-4">

21
src/components/Educators.vue
View File

@ -20,23 +20,23 @@
<p class="text-color-2 font-20px pb-16 pt-4 text-justify px-4">Specifically designed lesson plans are all you require this season! Created with the best strategies to invoke the right knowledge in children, these plans constitute a successful learning through a thoroughly constructed curriculum by providing worksheets, audio books, lessons, activities, games and much more associated with each plan. </p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 place-items-start px-4 " >
<div class="grid background rounded-xl">
<div class="bottombar cursor-pointer mt-4">
<img class="rounded-t-2xl w-full" src="/img/plan.jpg" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Scholarly Plan </h1>
<div class="bottombar cursor-pointer mt-4 flex flex-col place-items-center">
<img class="rounded-t-2xl" src="/img/dailylLesson-plan.jpg" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">Daily Plan </h1>
<p class="text-white text-justify text-xl">Created with all essential subjects, escalate children’s learning and become time-efficient with this scholarly plan to assist the development aspects at this age. It includes literacy, mathematics, vocabulary, reading, understanding of the world and arts & crafts.</p>
</div>
</div>
<div class="grid background rounded-xl">
<div class="bottombar cursor-pointer mt-4">
<img class=" w-full rounded-t-2xl " src="/img/plan.jpg" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Engaging Plan </h1>
<img class=" w-fit rounded-t-2xl " src="/img/weekly-lesson-plan.png" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">Weekly Plan </h1>
<p class="text-white text-justify text-xl">Making studies interesting for children is what every teacher or parent needs. The engaging plan is all about fun but fruitful learning. Get access to all kinds of learning activities including games, smart worksheets, quizzes, videos and many others.</p>
</div>
</div>
<div class="grid background rounded-xl">
<div class="bottombar cursor-pointer mt-4">
<img class=" w-full rounded-t-2xl" src="/img/plan.jpg" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">The Effective Plan </h1>
<img class=" w-fit rounded-t-2xl" src="/img/monthly-lesson-plan.png" alt="">
<h1 class="text-3xl text-blue-700 font-semibold text-center p-2">Monthly Plan </h1>
<p class="text-white text-xl text-justify">A combination of the scholarly and engaging plan, the most useful learning method of studying with fun learning has been adopted by the effective plan, along with adding a bunch of more concepts and activities to make children learn and grow successfully.</p>
</div>
</div>
@ -284,9 +284,12 @@ font-family: 'Quicksand', sans-serif;
.h1-text {
font-size: 30px;
}
.bottombar {
.image {
height: 300px;
}
.bottombar {
font-size: large;
/* width: 42px; */
width: fit-content;
overflow: hidden;
white-space: nowrap;
/* position: fixed; */

8
src/components/Footer.vue
View File

@ -5,11 +5,11 @@
<div class="grid grid-rows-1 bg-slider opacity-75 place-items-center">
<div class="flex bg-slider text-white text-center text-lg w-max pl-14 pr-14 p-3">
<a href="/worksheets">&#60&nbsp; Preschool Worksheets &nbsp;|</a>
<a href="/themes">&nbsp; Preschool Event Ideas &nbsp;|</a>
<a href="/audio-books">&nbsp; Preschool Audio Books &nbsp;|</a>
<a href="/videos">&nbsp; Preschool Videos &nbsp;|</a>
<a href="/occassion">&nbsp; Preschool Occasions &nbsp;|</a>
<a href="/themes">&nbsp; Preschool Monthly Themes &nbsp;|</a>
<a href="/themes">&nbsp; Preschool Celebration Ideas &nbsp; &#62</a>
<a href="/themes">&nbsp; Preschool Themes &nbsp;|</a>
<a href="/occassion">&nbsp; Preschool Celebration Ideas &nbsp; &#62</a>
</div>
</div>
</div>
@ -29,12 +29,12 @@
<a class="py-2" href="/faq">FAQs</a>
</div>
<div class="grid ml-4 h-fit">
<a class="py-2" href="/celebrationstories#submitCelebration">Event Ideas</a>
<a class="py-2" href="/worksheets" >Worksheets</a>
<a class="py-2" href="/videos">Videos</a>
<a class="py-2" href="/audio-books">Audiobooks</a>
<a class="py-2" href="/premium">Pricing Plans</a>
<a class="py-2" href="/whats-new">What's New</a>
<a class="py-2" href="/blog">Blog</a>
</div>
</div>
<div class="grid grid-cols-1 mt-4 ml-4 font-bold text-sm h-fit "><h1 style="color: #414141"> Get in touch with Us</h1>

2
src/components/Menu.astro
View File

@ -10,7 +10,7 @@
<a href="/educators">Educators</a>
<a href="/administrators">Administrators</a>
<div class="dropdownDesktop">
<button class="dropbtnDesktop" style="font-family: quicksand;">Recources <span class="">v</span>
<button class="dropbtnDesktop" style="font-family: quicksand;">Recources <span class="text-xs">∇</span>
<i class="fa fa-caret-downDesktop"></i>
</button>
<div class="dropdown-contentDesktop">

7
src/components/TestModal.astro Normal file
View File

@ -0,0 +1,7 @@
---
const {var1} = Astro.props;
---
<div>
<h2>cffdfd </h2>
{var1}
</div>

251
src/components/ThemesVideos.astro Normal file
View File

@ -0,0 +1,251 @@
---
const {var1} = Astro.props;
---
<template>
<section class="container mx-auto py-6 px-4 xl:px-24">
<div class="h1-text text-blue-700 font-semibold py-4">Videos</div>
<h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].videos_text}}</h1>
<div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<div v-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4">
<div @click="showYtModal(vdo.youtube_id)">
<div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
<div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
<img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
</div>
</div>
<div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
</div>
<!-- <label :for="vdo.videos_file" >
<div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
<div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
<img v-else src="/img/image_not_available.png" alt="" />
<img class="absolute top-20 left-28 -rotate-6 w-24" src="/img/svg/play.svg" alt="" />
</div>
</div>
<div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
</label>
<input type="checkbox" :id="vdo.videos_file" class="modal-toggle" />
<label :for="vdo.videos_file" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<iframe width="340"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</label>
</label> -->
</div>
<a href="/plan">
<div v-for="vdo in videos.slice(3, 4)" :key="videos.id" class="p-4">
<div class="flex bg-gray-200 -rotate-6 gap-8">
<div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-lg rounded-br-lg" />
<div class="absolute top-16 left-20">
<h3 class="text-center inline-block px-4 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">+ Subscribe </h3>
<h3 class="-ml-2"> &nbsp;To download <br> more resources</h3>
</div>
</div>
</div>
<div class="mt-6 text-center text-lg opacity-0">...</div>
</div></a>
</div>
</section>
<div @click="hideYtModal" v-if="ytModal" id="ytModal" class="flex justify-center ytModal">
<div class="modal-content">
<span @click="hideYtModal" class="close">&times;</span>
<div style="width: 100%;">
<iframe width="380" height="320"
:src="'https://www.youtube.com/embed/'+ytID">
</iframe>
</div>
</div>
</div>
</template>
<script>
export default {
setup(){
// const route = useRoute();
},
methods: {
showYtModal(ytID){
this.ytModal=true
this.ytID=ytID
},
hideYtModal(){
this.ytModal=false
// this.ytID=ytID
}
},
data() {
return {
page: null,
faqOccassion: null,
occassionblog: null,
themes:null,
allOccassion:null,
stories: null,
ideas: null,
worksheets: null,
videos: null,
youtube: null,
audio: null,
isLoading: true,
ytModal:false,
ytID:''
}
},
mounted: function () {
fetch('https://management.beanstalkedu.com/items/themes?filter[status][_eq]=published')
.then(response => response.json())
.then(data => {
this.page = data.data
this.isLoading = false
// console.log(this.page[0].id)
return this.page[0].id
})
.then((themesID) => {
fetch('https://management.beanstalkedu.com/items/theme_videos?filter[theme_key][_in]='+ themesID)
.then(resp => resp.json())
.then(videos => {
this.videos=videos.data.reverse().slice(0, 4)
// console.log(this.videos)
})
return themesID
})
}
}
</script>
<style scopped>
.font-20px {
font-size: 20px;
}
@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;
}
}
@media screen and (min-width: 801px) {
.h1-text {
font-size: 40px;
}
}
@media screen and (min-width: 1500px) {
.h2-text {
font-size: 30px;
}
}
@media screen and (max-width: 1499px) {
.h2-text {
font-size: 24px;
}
}
@media screen and (max-width: 1199px) {
.h2-text {
font-size: 20px;
}
}
@media screen and (max-width: 800px) {
.h1-text {
font-size: 30px;
}
}
.load-wraper{
position: relative;
height: 100%;
width: 100%;
background-color: rgb(211,211,211);
z-index: 44;
overflow: hidden;
border-radius: 5px;
}
.activity{
position: absolute;
left: -45%;
height: 100%;
width: 45%;
background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
animation: loading 1s infinite;
z-index: 45;
}
@keyframes loading {
0%{
left: -45%;
}
100%{
left: 100%;
}
}
.text-color-1 {
color: #7C4C23;
}
.text-color-2 {
color: #333333;
}
.box{
width: 380px;
height: 220px;
}
.box1 {
width: 500px;
height: 220px;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
.ytModal {
/* 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);
}
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
</style>

84
src/components/ThemesVideos.vue
View File

@ -1,51 +1,51 @@
<template>
<section class="container mx-auto py-6 px-4 xl:px-24">
<div class="h1-text text-blue-700 font-semibold py-4">Videos</div>
<h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].videos_text}}</h1>
<div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<div v-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4">
<div @click="showYtModal(vdo.youtube_id)">
<div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
<div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
<img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
</div>
</div>
<div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
<div class="h1-text text-blue-700 font-semibold py-4">Videos</div>
<h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].videos_text}}</h1>
<div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<div v-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4">
<div @click="showYtModal(vdo.youtube_id)">
<div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
<div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
<img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
</div>
<!-- <label :for="vdo.videos_file" >
<div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
<div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
<img v-else src="/img/image_not_available.png" alt="" />
<img class="absolute top-20 left-28 -rotate-6 w-24" src="/img/svg/play.svg" alt="" />
</div>
</div>
<div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
</label>
<input type="checkbox" :id="vdo.videos_file" class="modal-toggle" />
<label :for="vdo.videos_file" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<iframe width="340"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</label>
</label> -->
</div>
<a href="/plan">
<div v-for="vdo in videos.slice(3, 4)" :key="videos.id" class="p-4">
<div class="flex bg-gray-200 -rotate-6 gap-8">
<div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-lg rounded-br-lg" />
<div class="absolute top-16 left-20">
<h3 class="text-center inline-block px-4 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">+ Subscribe </h3>
<h3 class="-ml-2"> &nbsp;To download <br> more resources</h3>
</div>
</div>
</div>
<div class="mt-6 text-center text-lg opacity-0">...</div>
</div></a>
<div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
</div>
</section>
<!-- <label :for="vdo.videos_file" >
<div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
<div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
<img v-else src="/img/image_not_available.png" alt="" />
<img class="absolute top-20 left-28 -rotate-6 w-24" src="/img/svg/play.svg" alt="" />
</div>
</div>
<div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
</label>
<input type="checkbox" :id="vdo.videos_file" class="modal-toggle" />
<label :for="vdo.videos_file" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<iframe width="340"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</label>
</label> -->
</div>
<a href="/plan">
<div v-for="vdo in videos.slice(3, 4)" :key="videos.id" class="p-4">
<div class="flex bg-gray-200 -rotate-6 gap-8">
<div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-lg rounded-br-lg" />
<div class="absolute top-16 left-20">
<h3 class="text-center inline-block px-4 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">+ Subscribe </h3>
<h3 class="-ml-2"> &nbsp;To download <br> more resources</h3>
</div>
</div>
</div>
<div class="mt-6 text-center text-lg opacity-0">...</div>
</div></a>
</div>
</section>
<div @click="hideYtModal" v-if="ytModal" id="ytModal" class="flex justify-center ytModal">
<div class="modal-content">
<span @click="hideYtModal" class="close">&times;</span>

6
src/components/Worksheets.vue
View File

@ -52,7 +52,7 @@
<section class="container-fluid pt-10">
<p class="font-20px text-justify pt-6 container mx-auto px-4 xl:px-24">A mixture of uniqueness, innovativity, attractiveness and comprehension of each topic through a blend of letters, numbers, shapes, colors, sounds, words, etc., these worksheet for playgroup will bring out the best in your classroom! Find the appropriate worksheet for every subject inclusive of all significant topics and establish the right educational foundation among children.</p>
</section>
<div class="my-24"></div>
<div class="my-6"></div>
<!-- Literacy section -->
<section class="container mx-auto pt-10 px-4 xl:px-24">
<span class="h1-text text-blue-700 font-semibold">Literacy</span>
@ -70,7 +70,7 @@
<div class="grid">
<div class="grid place-items-center">
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
<img class="w-56 h-72 rotate-6 relative" src="/img/rectangle1.png" alt=""/>
<img class="w-56 h-72 rotate-6 relative" src="/img/uppercase-letter-g.png" alt=""/>
</div>
<h1 class="text-center pt-8 w-fit font-20px opacity-0">Click for View All</h1>
<a href="/worksheets/literacy" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8">View All</a>
@ -103,7 +103,7 @@
<div class="grid">
<div class="grid place-items-center">
<div class="bg-gray-200 w-56 h-72 relative -rotate-6 rounded-tl-xl rounded-br-xl shadow-xl">
<img class="w-56 h-72 rotate-6 relative" src="/img/rectangle1.png" alt=""/>
<img class="w-56 h-72 rotate-6 relative" src="/img/number-2.png" alt=""/>
</div>
<h1 class="text-center pt-8 w-fit font-20px opacity-0">Click for View All</h1>
<a href="/worksheets/mathematics" class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8">View All</a>

5
src/pages/input-test.astro Normal file
View File

@ -0,0 +1,5 @@
<main>
<div>
<input type="text" id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="John" required>
</div>
</main>

2
src/pages/modalt.astro
View File

@ -11,7 +11,7 @@ const videoRespData = videoRespJson.data.reverse();
<div class="h1-text text-blue-700 font-semibold py-4">Videos</div>
<!-- <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{data[0].videos_text}</h1> -->
<div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{videoRespData.map((data: { video_thumb: string | undefined; videos_title: string | undefined; celebration_ideas_body_text: string | undefined; title: string | undefined; }) =>
{videoRespData.map((data: { video_thumb: string | undefined; videos_title: string | undefined; youtube_id: string | undefined; title: string | undefined; }) =>
<div class="p-4">
<div onclick="document.getElementById('id01').style.display='block'">
<div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">

106
src/pages/modaltestinx.astro Normal file
View File

@ -0,0 +1,106 @@
---
const videoResp = await fetch('https://management.beanstalkedu.com/items/theme_videos?filter[theme_key][_in]=3');
const videoRespJson = await videoResp.json();
const videoRespData = videoRespJson.data.reverse();
---
<main>
<div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{videoRespData.map((data: { video_thumb: string | undefined; videos_title: string | undefined; youtube_id: string | undefined; title: string | undefined; }) =>
<div class="p-4">
<div id="data.youtube_id" class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
<div class="flex rotate-6 relative"><img src={'https://management.beanstalkedu.com/assets/'+data.video_thumb} alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
<img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
</div>
</div>
<div class="mt-6 text-center text-xl text-color-2">{data.videos_title}</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div style="width: 100%;">
<iframe width="380" height="320"
src={'https://www.youtube.com/embed/'+data.youtube_id}>
</iframe>
</div>
</div>
</div>
)}
</div>
<!-- Trigger/Open The Modal -->
<!-- <button id="myBtn">Open Modal</button> -->
<!-- The Modal -->
</main>
<script is:inline>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("data.youtube_id");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>

59
src/pages/page-404.astro Normal file
View File

@ -0,0 +1,59 @@
---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Footer from "../components/Footer.vue";
---
<Layout title="">
<Menu />
<main>
<div class="body">
<section class="container-fluid">
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
<div class="flex flex-col">
<p class="hero-text font-bold text-blue-700">Page Not Found</p>
<p class="h1-text font-bold">Sorry, the page you asked for couldn’t be found.</p>
</div>
</div>
</section>
</div>
</main>
<Footer client:visible/>
</Layout>
<style>
@media screen and (min-width: 1500px) {
.hero-text {
font-size: 96px;
}
}
@media screen and (max-width: 1499px) {
.hero-text {
font-size: 60px;
}
}
@media screen and (max-width: 1199px) {
.hero-text {
font-size: 40px;
}
}
@media screen and (min-width: 801px) {
.h1-text {
font-size: 40px;
}
}
@media screen and (max-width: 800px) {
.h1-text {
font-size: 25px;
}
}
.bg3 {
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
}
</style>

2
src/pages/test-modal.astro
View File

@ -1,8 +1,10 @@
---
import Layout from '../layouts/Layout.astro';
import AudioBookModal from '../components/AudioBookModal.vue';
import TestModal from '../components/TestModal.astro';
---
<Layout title="">
<TestModal var1="oeeee"/>
<AudioBookModal client:visible/>
</Layout>

2
src/pages/themes/[id].astro
View File

@ -124,7 +124,7 @@ import Footer from "../../components/Footer.vue";
</a>
</div>
</section>
<ThemesVideos client:visible/>
<ThemesVideos themeId={thisThemesID} client:visible/>
<ThemesAudioBook client:visible/>
<!-- <section class="container mx-auto pt-16 xl:px-24 px-4">
<h1 class="h1-text text-blue-700 font-semibold">Celebretion stories</h1>