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

pp

master
Suvodip Ghosh 2023-02-09 21:23:21 +05:30
parent 85a03a3f24
commit 82b9847737
18 changed files with 421 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Audio-books.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<section class="container-fluid bg3">
<section class="container-fluid bg3 shadow-2xl">
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
<div class="flex flex-col w-fit justify-center">
<h1 class="text-blue-700 hero-text font-bold">Audio Books<span class="text-color-1"> For Your Classroom</span></h1>
@ -24,9 +24,8 @@
</div>
</section> -->
<section>
<!-- <p class="container mx-auto px-6 text-color-2 text-2xl text-justify mt-4">Develop children’s listening skills, confidence, vocabulary, innovativity and much more by adding preschool audio books to their routine and witness the positive change in their personality. </p> -->
<!-- <p class="container mx-auto px-6 text-color-2 text-2xl text-justify mt-6">If you are looking for enchanting listening books for preschoolers, then this is the right platform, where you can find categorized best audio books for preschoolers that are the accurate components of a child’s preschool curriculum. </p> -->
<div class="flex flex-col md:flex-row bg3 justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4">
<!-- Age Filter Triger -->
<!-- <div class="flex flex-col md:flex-row bg3 justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4">
<div class="flex ">
<h1 class="pt-3 font-semibold">Age:&nbsp;</h1>
<select class="select max-w-xs bg3" @change="switchSelect($event)">
@ -37,7 +36,7 @@
<option value="5">5-6 Year</option>
</select>
</div>
</div>
</div> -->
</section>
<section class="container-fluid pt-10">
<p class="container mx-auto px-4 xl:px-24 font-20px text-justify pt-6">If you are looking for enchanting listening books for preschoolers, then this is the right platform, where you can find categorized best audio books for preschoolers that are the accurate components of a child’s preschool curriculum.</p>
@ -70,7 +69,7 @@
<div class="flex justify-center">
<div class="grid place-items-center">
<img class="relative opacity-50 w-96" src="/img/audio-icon.png" alt=""/>
<a href="/audio-books/mathematics"><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">View All</button></a>
<a href="/audio-books/literacy"><button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg">View All</button></a>
</div>
</div>
</div>
@ -232,19 +231,19 @@ export default {
// this.selected = event.target.value;
},
getAudio(age=2){
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[age][_eq]='+age+'&filter[category][_eq]=literacy')
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy')
.then(resp => resp.json())
.then(worksheets => {
this.abliteracy=worksheets.data.reverse().slice(0, 3)
// console.log(this.abliteracy)
})
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[age][_eq]='+age+'&filter[category][_eq]=mathematics')
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics')
.then(resp => resp.json())
.then(worksheets => {
this.abmath=worksheets.data.reverse().slice(0, 3)
// console.log(this.abmath)
})
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[age][_eq]='+age+'&filter[category][_eq]=world')
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=world')
.then(resp => resp.json())
.then(worksheets => {
this.abworld=worksheets.data.reverse().slice(0, 3)

17
src/components/Audio-literacy.vue
View File

@ -1,9 +1,10 @@
<template>
<div>
<!-- Hero Section -->
<section class="container-fluid">
<section class="container-fluid shadow-2xl">
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Audio Books for <span class="text-color-1">Literacy</span></div>
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<!-- Age Filter Triger -->
<!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<div class="flex">
<h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
<select class="select max-w-xs bg3">
@ -14,17 +15,7 @@
<option>5-6 Year</option>
</select>
</div>
<!-- <div class="flex ">
<h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
<select class="select max-w-xs">
<option>Select your Category</option>
<option>3-4 Year</option>
<option>4-5 Year</option>
<option>5-6 Year</option>
<option>6-7 Year</option>
</select>
</div> -->
</div>
</div> -->
</section>
<section class="container mx-auto pt-10 px-6 xl:px-24">
<span class="h1-text text-color-1">All Audio Books</span>

17
src/components/Audio-mathematics.vue
View File

@ -1,9 +1,10 @@
<template>
<div>
<!-- Hero Section -->
<section class="container-fluid">
<section class="container-fluid shadow-2xl">
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Audio Books for <span class="text-color-1">Mathematics</span></div>
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<!-- Age Filter Triger -->
<!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<div class="flex">
<h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
<select class="select max-w-xs bg3">
@ -14,17 +15,7 @@
<option>5-6 Year</option>
</select>
</div>
<!-- <div class="flex ">
<h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
<select class="select max-w-xs">
<option>Select your Category</option>
<option>3-4 Year</option>
<option>4-5 Year</option>
<option>5-6 Year</option>
<option>6-7 Year</option>
</select>
</div> -->
</div>
</div> -->
</section>
<section class="container mx-auto pt-10 px-6 xl:px-24">
<span class="h1-text text-color-1">All Audio Books</span>

17
src/components/Audio-worlds.vue
View File

@ -1,9 +1,10 @@
<template>
<div>
<!-- Hero Section -->
<section class="container-fluid">
<section class="container-fluid shadow-2xl">
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Audio Books for <span class="text-color-1">Understanding the Worlds</span></div>
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<!-- Age Filter Triger -->
<!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<div class="flex">
<h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
<select class="select max-w-xs bg3">
@ -14,17 +15,7 @@
<option>5-6 Year</option>
</select>
</div>
<!-- <div class="flex ">
<h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
<select class="select max-w-xs">
<option>Select your Category</option>
<option>3-4 Year</option>
<option>4-5 Year</option>
<option>5-6 Year</option>
<option>6-7 Year</option>
</select>
</div> -->
</div>
</div> -->
</section>
<section class="container mx-auto pt-10 px-6 xl:px-24">
<span class="h1-text text-color-1">All Audio Books</span>

287
src/components/Homepage.vue
View File

@ -45,19 +45,19 @@
</div>
</section> -->
<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="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>
<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>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/worksheets"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</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">Popular Curriculum</h1>
<p class=" font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet also provides practical knowledge of daily life to preschoolers.</p>
<p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet also provides practical knowledge of daily life to preschoolers.</p>
<!-- <router-link to="#"><h1 class="text-blue-700 hover:font-bold text-lg hover:font-italic">Click Here...</h1></router-link> -->
<router-link to="/#EYFSCurriculum"><button class="bg-blue-700 text-white px-6 py-2 text-2xl rounded-tl-md rounded-br-md">Discover Now</button></router-link>
</div>
@ -97,13 +97,13 @@
<div class="flex flex-rows-2 justify-center font-semibold hero-text mt-8 text-color-1 py-10 px-4">Resources To Choose From</div>
<div class="grid grid-rows-1 md:grid-rows-2 place-items-center m-8 w-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 place-items-between">
<div class="grid"><router-link to="/audiobooks"><img draggable="false" src="/img/Audiobooks.png" alt=""></router-link></div>
<div class="grid"><router-link to="/worksheets"><img draggable="false" src="/img/Worksheet.png" alt=""></router-link></div>
<div class="grid"><router-link to="/videos"><img draggable="false" src="/img/Videos.png" alt=""></router-link></div>
<div class="grid"><a href="/audio-books"><img draggable="false" src="/img/Audiobooks.png" alt=""></a></div>
<div class="grid"><a href="/worksheets"><img draggable="false" src="/img/Worksheet.png" alt=""></a></div>
<div class="grid"><a href="/videos"><img draggable="false" src="/img/Videos.png" alt=""></a></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 place-items-between">
<div class="grid"><router-link to="/themes"><img draggable="false" src="/img/Event-ideas.jpg" alt=""></router-link></div>
<div class="grid"><router-link to=""><img draggable="false" src="/img/Reference-Links.png" alt=""></router-link></div>
<div class="grid"><a href="/themes"><img draggable="false" src="/img/Event-ideas.jpg" alt=""></a></div>
<div class="grid"><a href=""><img draggable="false" src="/img/Reference-Links.png" alt=""></a></div>
</div>
</div>
</section>
@ -112,34 +112,21 @@
<div class="grid row-span-1 h-fit px-4">
<h1 class="text-color-1 font-semibold py-3 hero-text">Trending Lesson Plans</h1>
<h1 class="text-xl md:text-3xl text-color-2 pb-4">Discover today`s popular lesson <br> plans specially curated for your classroom.</h1>
<div><router-link to="/dailyplan" class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</router-link></div>
<div><a href="/dailyplan" class="text-2xl bg-blue-700 px-6 py-2 text-white rounded-tl-xl rounded-br-xl">Check Out Now</a></div>
</div>
<div class="grid row-span-2 place-items-center lg:place-items-end w-fit">
<swiper class="w-min"
<div class="grid row-span-2 place-items-center lg:place-items-end cursor-pointer">
<swiper class="w-96"
:modules="modules"
:slides-per-view="1"
:space-between="0"
navigation
:autoplay=" { delay: 25000, disableOnInteraction: false}"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
@slideChange="onSlideChange">
<swiper-slide v-for="lesson in lessonplan" :key="lesson.id">
<img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
</swiper-slide>
</swiper>
<!-- <vueper-slides
class="no-shadow w-96 px-14 md:px-0" arrows-outside
:visible-slides="1"
:bullets="false"
slide-multiple
:gap="1"
:slide-ratio="3/3"
:touchable="true"
:dragging-distance="200"
:breakpoints="{ 800: { visibleSlides: 1, } }">
<vueper-slide v-for="lesson in lessonplan" :key="lesson.id" :image="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" />
</vueper-slides> -->
</swiper>
</div>
</div>
</section>
@ -149,7 +136,7 @@
<p class="text-color-1 hero-text font-bold mt-20">Discover Our Preschool Solutions</p>
<router-link to="/worksheets"><button class="bg-blue-700 rounded-tl-lg rounded-br-lg text-white text-2xl px-6 py-2">Discover All</button></router-link>
</div>
<div class="grid place-items-center md:place-items-end"><img src="/img/rectangle1.png" alt=""></div>
<div class="grid place-items-center md:place-items-end"><img src="/img/rectangle1.png" alt=""></div>
</div>
</section>
<!-- <section class="container mx-auto">
@ -184,7 +171,32 @@
<div class="grid ">
<img src="/img/legends.png" alt="" class="p-8">
<div class="flex relative justify-center text-xs ">
<Roundchart/>
<div class="grid">
<div class="flex relative justify-center text-xs">
<img class="" src="/img/frame1.png" alt="">
<p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Literacy</abbr>
</p>
<p class="comunication absolute -mt-8 md:mt-12 ml-48 md:ml-72 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Comunication <br>& Language</abbr>
</p>
<p class="mathematics absolute ml-48 md:ml-72 -mt-32 md:-mt-0 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Mathematics</abbr>
</p>
<p class="world absolute -mt-36 ml-12 md:-mt-4 lg:ml-20 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Understanding <br> the World </abbr>
</p>
<p class="physical absolute -mt-24 md:mt-4 -ml-40 md:-ml-56 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Physical <br> Development </abbr>
</p>
<p class="expressive absolute -mt-16 md:mt-4 -ml-48 md:-ml-80 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Expressive Arts<br> & Desgine </abbr>
</p>
<p class="preschool absolute -ml-28 md:-ml-40 -mt-4 md:mt-4 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
Preschool, Social <br>& Emotional <br>Development</abbr>
</p>
</div>
</div>
</div>
<h1 class="h1-text font-bold text-color-2 pl-8">Discover in Preschool Education</h1>
<p class="text-xl md:text-3xl text-color-2 pl-8">Mentions are going to implemented Preschool Education System</p>
@ -251,84 +263,107 @@
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
</div>
</section>
<div>
</div>
</div>
</template>
<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],
</div>
</template>
<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';
};
},
data() {
return {
page: null,
faqHome: null,
themes:null,
lessonplan:null,
stories: null,
ideas: null,
worksheets: null,
videos: null,
youtube: null,
audio: null,
isLoading: true,
}
},
mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
.then(response => response.json())
.then(data => {
this.lessonplan = data.data
// this.isLoading = false
// console.log(this.page[0].id)
// return this.page[0].id
}),
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
.then(resp => resp.json())
.then(data => {
this.faqHome=data.data
// console.log(this.faqHome)
})
},
}
</script>
// Import Swiper styles
import 'swiper/css';
// const swiper = new Swiper('.swiper', {
// autoplay: {
// delay: 5000,
// },
// });
import { computed, defineComponent, ref } from "vue";
<style scoped>
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,
faqHome: null,
themes:null,
lessonplan:null,
stories: null,
ideas: null,
worksheets: null,
videos: null,
youtube: null,
audio: null,
isLoading: true,
}
},
mounted: function () {
fetch('https://curriculum-app-api.beanstalkedu.com/items/lesson_plan?filter[plan][_eq]=daily')
.then(response => response.json())
.then(data => {
this.lessonplan = data.data
// this.isLoading = false
// console.log(this.lessonplan)
// return this.page[0].id
})
fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=home')
.then(resp => resp.json())
.then(data => {
this.faqHome=data.data
// console.log(this.faqHome)
})
},
name: "ExpandableBlockContent",
props: {
content: { type: String },
},
setup() {
const isExpanded = ref(true);
const toggleCtaLabel = computed(() =>
isExpanded.value ? "Read Less >" : "Read More >"
);
return {
isExpanded,
toggleCtaLabel,
};
},
};
</script>
<style >
.block-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.block-content__button {
color: #1d4ed8;
text-decoration: underline;
}
.position {
position: relative;
width: 100%;
@ -382,32 +417,30 @@
}
}
.literacy {
transform: rotate(24deg);
/* left: 24px; */
top: 120px;
/* align-items: center; */
top: 110px;
transform: rotate(25deg);
}
.comunication {
transform: rotate(80deg);
/* left: 360px; */
top: 170px;
}
.mathematics {
transform: rotate(-50deg);
top: 373px;
}
.world {
transform: rotate(-10deg);
top: 420px;
}
.physical {
transform: rotate(44deg);
top: 340px;
}
.expressive {
transform: rotate(-90deg);
top: 225px;
}
transform: rotate(80deg);
/* left: 360px; */
top: 170px;
}
.mathematics {
transform: rotate(-50deg);
top: 373px;
}
.world {
transform: rotate(-10deg);
top: 420px;
}
.physical {
transform: rotate(44deg);
top: 340px;
}
.expressive {
transform: rotate(-90deg);
top: 225px;
}
.preschool {
transform: rotate(-35deg);
top: 95px;

85
src/components/Readmore.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<div class="block-content">
<transition
@before-enter="onBeforeEnter"
@enter="onEnter"
@after-enter="onAfterEnter"
@before-leave="onBeforeLeave"
@leave="onLeave"
mode="out-in"
>
<p v-if="!isExpanded" class="block-content__preview" >The EYFS British kindergarten curriculum has been adopted by multiple preschools throughout the country. The curriculum not only acknowledges theoretical subjects, yet</p>
<p
v-else
:class="{
'block-content__paragraph': true,
'block-content__paragraph--is-expanded': isExpanded,
}"
>also provides practical knowledge of daily life to preschoolers.</p>
</transition>
<button
type="button"
class="block-content__button"
aria-label="Toggle button"
@click="isExpanded = !isExpanded"
>
{{ toggleCtaLabel }}
</button>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref, toRefs } from "vue";
export default defineComponent({
name: "ExpandableBlockContent",
props: {
content: { type: String },
visibleLines: { type: Number, default: 4 },
},
setup(props) {
const { visibleLines } = toRefs(props);
// Collapsed state
// Assuming that default line-height is 24px
const LINE_HEIGHT = 24;
const maxHeightCollapsed = computed(() => LINE_HEIGHT * visibleLines.value);
// Animation hooks
const onBeforeEnter = (el: Element) => {
const htmlEl = el as HTMLElement;
htmlEl.style.height = maxHeightCollapsed.value + "px";
};
const onEnter = (el: Element) => {
const htmlEl = el as HTMLElement;
htmlEl.style.height = el.scrollHeight + "px";
};
const onAfterEnter = (el: Element) => {
const htmlEl = el as HTMLElement;
htmlEl.style.overflow = "hidden";
};
const onBeforeLeave = (el: Element) => {
const htmlEl = el as HTMLElement;
htmlEl.style.height = `${el.scrollHeight}px`;
htmlEl.style.overflow = "hidden";
};
const onLeave = (el: Element) => {
const htmlEl = el as HTMLElement;
htmlEl.style.height = maxHeightCollapsed.value + "px";
htmlEl.style.overflow = "hidden";
};
// Expanded state
const isExpanded = ref(false);
const toggleCtaLabel = computed(() =>
isExpanded.value ? "Read less" : "Read more"
);
return {
isExpanded,
toggleCtaLabel,
onBeforeEnter,
onEnter,
onAfterEnter,
onBeforeLeave,
onLeave,
};
},
});
</script>

12
src/components/TestSwiper.vue
View File

@ -9,15 +9,9 @@
@slideChange="onSlideChange"
>
<swiper-slide v-for="lesson in lessonplan" :key="lesson.id">
<img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
</swiper-slide>
<!-- <swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
<swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
<swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
<swiper-slide><img src="/img/13.png" alt=""></swiper-slide>
<swiper-slide><img src="/img/13.png" alt=""></swiper-slide> -->
</swiper>
<img lesson.lesson_icon :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ lesson.lesson_icon" alt="">
</swiper-slide>
</swiper>
</template>
<script>
// Import Swiper Vue.js components

2
src/components/Themes.vue
View File

@ -160,7 +160,7 @@
</label>
<!-- <label :for="aud.file" class="btn">{{aud.id}} -</label> -->
<input type="checkbox" :id="aud.file" class="modal-toggle" />
<input type="" :id="aud.file" class="modal-toggle" />
<label :for="aud.file" class="modal cursor-pointer">
<label class="modal-box relative" for="">
<audio controls>

17
src/components/Video-literacy.vue
View File

@ -1,9 +1,10 @@
<template>
<div>
<!-- Hero Section -->
<section class="container-fluid">
<section class="container-fluid shadow-2xl">
<div class="bg3 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Videos for <span class="text-color-1">Literacy</span></div>
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-72 px-4 pt-5 shadow-xl lg:gap-4">
<!-- Age Filter Triger -->
<!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-72 px-4 pt-5 shadow-xl lg:gap-4">
<div class="flex">
<h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
<select class="select max-w-xs bg3">
@ -14,17 +15,7 @@
<option>5-6 Year</option>
</select>
</div>
<!-- <div class="flex ">
<h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
<select class="select max-w-xs">
<option>Select your Category</option>
<option>3-4 Year</option>
<option>4-5 Year</option>
<option>5-6 Year</option>
<option>6-7 Year</option>
</select>
</div> -->
</div>
</div> -->
</section>
<section class="container mx-auto pt-10 px-8 xl:px-24">
<span class="h1-text text-color-1">All Videos</span>

17
src/components/Video-mathematics.vue
View File

@ -1,9 +1,10 @@
<template>
<div>
<!-- Hero Section -->
<section class="container-fluid">
<section class="container-fluid shadow-2xl">
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Videos for <span class="text-color-1">Mathematics</span></div>
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<!-- Age Filter Triger -->
<!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<div class="flex">
<h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
<select class="select max-w-xs bg3">
@ -14,17 +15,7 @@
<option>5-6 Year</option>
</select>
</div>
<!-- <div class="flex ">
<h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
<select class="select max-w-xs">
<option>Select your Category</option>
<option>3-4 Year</option>
<option>4-5 Year</option>
<option>5-6 Year</option>
<option>6-7 Year</option>
</select>
</div> -->
</div>
</div> -->
</section>
<section class="container mx-auto pt-10 px-6 xl:px-24">
<span class="h1-text text-color-1">All Videos</span>

17
src/components/Video-world.vue
View File

@ -1,9 +1,10 @@
<template>
<div>
<!-- Hero Section -->
<section class="container-fluid">
<section class="container-fluid shadow-2xl">
<div class="bg-gradient-to-t from-blue-200 hero-text font-bold text-blue-700 text-center py-24 md:py-48 px-4">Videos for <span class="text-color-1">Understanding the Worlds</span></div>
<div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<!-- Age Filter Triger -->
<!-- <div class="bg3 flex flex-col md:flex-row justify-center md:justify-end lg:px-48 px-4 pt-5 shadow-xl lg:gap-4">
<div class="flex">
<h1 class=" pt-3 font-semibold py-8">Age:&nbsp;</h1>
<select class="select max-w-xs bg3">
@ -14,17 +15,7 @@
<option>5-6 Year</option>
</select>
</div>
<!-- <div class="flex ">
<h1 class="pt-3 font-semibold py-8">Category:&nbsp;</h1>
<select class="select max-w-xs">
<option>Select your Category</option>
<option>3-4 Year</option>
<option>4-5 Year</option>
<option>5-6 Year</option>
<option>6-7 Year</option>
</select>
</div> -->
</div>
</div> -->
</section>
<section class="container mx-auto pt-10 px-6 xl:px-24">
<span class="h1-text text-color-1">All Videos</span>

29
src/components/Videos.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<section class="container-fluid bg3">
<section class="container-fluid bg3 shadow-2xl">
<div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
<div class="flex flex-col w-fit justify-center">
<h1 class="text-blue-700 hero-text font-bold">Videos<span class="text-color-1"> For Your Classroom</span></h1>
@ -31,9 +31,8 @@
</div>
</section> -->
<section>
<!-- <p class="container mx-auto px-6 text-color-2 font-20px text-justify mt-4">It’s time to bring out the best among your toddlers with a blend of visual and audio effects! Present them a world filled with magnificent effects and make them learn enthusiastically with preschool learning videos filled with rhyming sounds, attractive effects, graphic images and cartoons, etc. </p> -->
<!-- <p class="container mx-auto px-6 text-color-2 font-20px text-justify mt-4">Make learning exciting with Teeny Beans Preschool Curriculum’s videos for preschoolers that will provide the right learning and understanding to the little ones. These educational videos for preschoolers constitute every fundamental topic. </p> -->
<div class="flex flex-col bg3 md:flex-row justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4">
<!-- Age Filter Triger -->
<!-- <div class="flex flex-col bg3 md:flex-row justify-center md:justify-end lg:px-48 px-4 shadow-xl lg:gap-4">
<div class="flex ">
<h1 class="pt-3 font-semibold">Age:&nbsp;</h1>
<select class="select max-w-xs bg3" @change="switchSelect($event)">
@ -44,7 +43,7 @@
<option value="5">5-6 Year</option>
</select>
</div>
</div>
</div> -->
</section>
<section class="container-fluid pt-10">
<p class="font-20px text-justify pt-6 container mx-auto px-4 xl:px-24">Make learning exciting with Teeny Beans Preschool Curriculum’s videos for preschoolers that will provide the right learning and understanding to the little ones. These educational videos for preschoolers constitute every fundamental topic.</p>
@ -209,33 +208,33 @@ export default {
}
},
methods: {
// showYtModal(ytID){
// this.ytModal=true
// this.ytID=ytID
// },
// hideYtModal(){
// this.ytModal=false
showYtModal(ytID){
this.ytModal=true
this.ytID=ytID
},
hideYtModal(){
this.ytModal=false
// // this.ytID=ytID
// },
},
switchSelect(event) {
// alert(event.target.value)
this.getVideos(event.target.value)
// this.selected = event.target.value;
},
getVideos(age=2){
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[age][_eq]='+age+'&filter[category][_eq]=literacy')
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[category][_eq]=literacy')
.then(resp => resp.json())
.then(videobooks => {
this.vbliteracy=videobooks.data.reverse().slice(0, 3)
console.log(this.vbliteracy)
})
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[age][_eq]='+age+'&filter[category][_eq]=mathematics')
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[category][_eq]=mathematics')
.then(resp => resp.json())
.then(videobooks => {
this.vbmath=videobooks.data.reverse().slice(0, 3)
// console.log(this.vbmath)
})
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[age][_eq]='+age+'&filter[category][_eq]=world')
fetch('https://curriculum-app-api.beanstalkedu.com/items/video_book?filter[category][_eq]=world')
.then(resp => resp.json())
.then(videobooks => {
this.vbworld=videobooks.data.reverse().slice(0, 3)

4
src/pages/about.astro
View File

@ -1,13 +1,13 @@
---
import Layout from '../layouts/Layout.astro';
import Header from '../components/Header.astro';
// import Header from '../components/Header.astro';
import Homepage from '../components/Homepage.vue';
import Faq from '../components/Faq.vue';
import Roundchart from '../components/Roundchart.vue';
import Footer from '../components/Footer.vue';
---
<Layout title="Welcome to Astro.">
<Header />
<!-- <Header /> -->
<Homepage />
<Faq />
<Roundchart/>

4
src/pages/audio.astro
View File

@ -1,7 +1,7 @@
---
import Layout from "../layouts/Layout.astro";
import Audio from "../components/Audio.vue";
// import Audio from "../components/Audio.vue";
---
<Layout title="Audio Books">
<Audio client:visible/>
<!-- <Audio client:visible/> -->
</Layout>

19
src/pages/blog/[id].astro Normal file
View File

@ -0,0 +1,19 @@
---
const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog/1');
const data = await response.json();
const blog = data.data;
console.log(blog)
export function getStaticPaths() {
return [
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } }
];
}
const { id } = Astro.params;
---
<h1>{id}</h1>
<h1>{id}</h1>
{blog}

24
src/pages/blog/a.astro Normal file
View File

@ -0,0 +1,24 @@
---
// const response = await fetch('https://curriculum-app-api.beanstalkedu.com/items/blog/1');
// const data = await response.json();
const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0];
console.log(randomUser) // dont see a console log on browser
// const randomUser = data.results[0];
export function getStaticPaths() {
return [
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } }
];
}
const { id } = Astro.params;
---
<h1>{id}</h1>
<h1>{id}</h1>
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

8
src/pages/blog.astro → src/pages/blog/index.astro
View File

@ -1,8 +1,8 @@
---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Blog from "../components/Blog.vue";
import Footer from "../components/Footer.vue";
import Layout from "../../layouts/Layout.astro";
import Menu from "../../components/Menu.astro";
import Blog from "../../components/Blog.vue";
import Footer from "../../components/Footer.vue";
---
<Layout title="Welcome to Astro.">

75
src/pages/read.astro Normal file
View File

@ -0,0 +1,75 @@
---
import Layout from "../layouts/Layout.astro";
import Readmore from "../components/Readmore.vue";
---
<Layout title="">
<Readmore client:visible/>
</Layout>
<!-- <main>
<h1>Hello world</h1>
<p class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis
veritatis animi aliquam laboriosam velit, esse, blanditiis aspernatur sint
est magnam debitis delectus in fuga fugiat repellat dignissimos ipsum
necessitatibus corrupti veniam reprehenderit,<span class="dots"> ...</span>
<span class="moreText">
assumenda sapiente expedita labore atque! Sint velit cumque minus
pariatur quisquam, beatae ab quo impedit eaque soluta vel laboriosam
itaque similique iste ex aut in nihil dolorem consequuntur possimus
eligendi eos optio ipsam! Sint ullam voluptate obcaecati asperiores eos
vero sed iusto magnam ad, vel repellat quidem? Omnis fugit accusantium,
illo quos eos odio consectetur et nemo excepturi deleniti dolorum
adipisci dolores delectus possimus libero, sed iusto dolorem? Lorem
ipsum dolor sit amet consectetur adipisicing elit. Reiciendis neque
distinctio modi dicta ut aperiam molestiae quos incidunt dolore iure
officia! Blanditiis sint delectus quam quae nulla.</span
>
</p>
<button class="read-more-btn">Read More</button>
</main>
<script is:inline>
const readMoreBtn = document.querySelector(".read-more-btn");
const text = document.querySelector(".text");
readMoreBtn.addEventListener("click", (e) => {
text.classList.toggle("show-more");
if (readMoreBtn.innerText === "Read More") {
readMoreBtn.innerText = "Read Less";
} else {
readMoreBtn.innerText = "Read More";
}
});
</script>
<style>
body {
font-family: "Montserrat";
text-align: justify;
max-width: 800px;
margin: 0 auto;
background-color: rgb(18, 23, 27);
color: aliceblue;
}
.text {
font-size: 24px;
}
.moreText {
display: none;
}
.read-more-btn {
padding: 15px 60px;
background-color: rgb(149, 170, 197);
color: rgb(53, 49, 49);
border: none;
outline: none;
font-size: 20px;
cursor: pointer;
}
.text.show-more .moreText {
display: inline;
}
.text.show-more .dots {
display: none;
}
</style> -->