audio modal
Suvodip Ghosh
parent
54f6d6fdcd
commit
36435bbfa3
|
|
@ -8,7 +8,9 @@
|
|||
"start": "astro dev --host --port 2011",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
"astro": "astro",
|
||||
"push": "rsync -azP dist/ ns7@ns7.siliconpin.com:/home/ns7/domains/teeny-astro.siliconpin.com/public_html"
|
||||
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/tailwind": "^2.1.3",
|
||||
|
|
|
|||
|
|
@ -11,21 +11,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <section class="bg-gradient-to-t bg3 shadow-2xl">
|
||||
<div class="flex flex-col xl:flex-row place-items-center">
|
||||
<div class="flex flex-col px-6 pt-6">
|
||||
<h1 class="text-blue-700 hero-text font-bold xl:w-5/12">Worksheet<span class="text-color-1"> For Your Classroom</span></h1>
|
||||
<p class="font-20px xl:w-8/12 text-justify">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="font-20px xl:w-8/12 text-justify pt-4">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>
|
||||
<div class="flex w-full justify-center place-items-center">
|
||||
<img class="w-full h-fit rounded-3xl py-4 cursor-none" src="/img/audio-book1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<section>
|
||||
<!-- 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">
|
||||
<!-- <section>
|
||||
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: </h1>
|
||||
<select class="select max-w-xs bg3" @change="switchSelect($event)">
|
||||
|
|
@ -36,8 +24,8 @@
|
|||
<option value="5">5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> -->
|
||||
</section>
|
||||
</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>
|
||||
</section>
|
||||
|
|
@ -46,23 +34,14 @@
|
|||
<section class="container mx-auto pt-10 px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">Literacy</span>
|
||||
<p class=" font-20px text-color-2 text-justify">Enhance ideas and learning power of children by stimulating their brain cells with the right understanding of mathematics that they need later in life. Make toddlers listen to the right concepts, numbers, etc. with our preschool audio books that prioritizes learning while entertaining. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-10 gap-10 place-items-center">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center px-4">
|
||||
<div v-for="audiobooks in abliteracy" :key="abliteracy.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative">
|
||||
<label class="grid place-items-center" :for="audiobooks.file">
|
||||
<div @click="showAbModal(audiobooks.file)">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" ">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal cursor-pointer">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -109,62 +88,44 @@
|
|||
<section class="container mx-auto px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">Mathematics</span>
|
||||
<p class=" font-20px text-color-2 text-justify">Enhance ideas and learning power of children by stimulating their brain cells with the right understanding of mathematics that they need later in life. Make toddlers listen to the right concepts, numbers, etc. with our preschool audio books that prioritizes learning while entertaining. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-10 gap-10 place-items-center">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center px-4">
|
||||
<div v-for="audiobooks in abmath" :key="abmath.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative">
|
||||
<label class="grid place-items-center" :for="audiobooks.file">
|
||||
<div @click="showAbModal(audiobooks.file)">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" ">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal cursor-pointer">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</section>
|
||||
<!-- Understanding the Worlds section -->
|
||||
<section class="container mx-auto pt-10 px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">Understanding the Worlds</span>
|
||||
<span class="h1-text text-color-1">Understanding the World</span>
|
||||
<p class="font-20px text-color-2 text-justify">Increase the imaginative power of young creative minds of children, speaking skills and provide them a better comprehension of the world with the listening books for preschoolers in the subject ‘Understanding of the World’ where you get all concepts in the audio form. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-14 gap-10 place-items-center">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center px-4">
|
||||
<div v-for="audiobooks in abworld" :key="abworld.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" relative">
|
||||
<label class="grid place-items-center" :for="audiobooks.file">
|
||||
<div @click="showAbModal(audiobooks.file)">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" ">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal cursor-pointer">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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/understanding-the-worlds"><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>
|
||||
|
|
@ -186,52 +147,66 @@
|
|||
</div>
|
||||
</section> -->
|
||||
<section class="container mx-auto py-20">
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48 px-4 xl:px-24">
|
||||
<div class="grid h-fit">
|
||||
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
|
||||
<div v-for="faqAudio in faqAudio" :key="faqAudio.id" class="">
|
||||
<div class="grid h-fit text-color-2">
|
||||
<div tabindex="0" class="collapse collapse-arrow border-b">
|
||||
<div v-if="faqAudio" class="collapse-title md:text-xl ">+ {{ faqAudio.title }}</div>
|
||||
<div class="collapse-content md:text-lg">
|
||||
<p class="" v-html="faqAudio.content"></p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48 px-4 xl:px-24">
|
||||
<div class="grid h-fit">
|
||||
<h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
|
||||
<div v-for="faqAudio in faqAudio" :key="faqAudio.id" class="">
|
||||
<div class="grid h-fit text-color-2">
|
||||
<div tabindex="0" class="collapse collapse-arrow border-b">
|
||||
<div v-if="faqAudio" class="collapse-title md:text-xl ">+ {{ faqAudio.title }}</div>
|
||||
<div class="collapse-content md:text-lg">
|
||||
<p class="" v-html="faqAudio.content"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div>
|
||||
</div>
|
||||
</section>
|
||||
<div v-if="abModal" id="abModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<audio controls>
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ abID" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
faqAudio: null,
|
||||
worksheets: null,
|
||||
abliteracy: null,
|
||||
abmath: null,
|
||||
abworld: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
abModal:false,
|
||||
abliteracy:null,
|
||||
abworld:null,
|
||||
abmath:null,
|
||||
abID:''
|
||||
|
||||
methods: {
|
||||
switchSelect(event) {
|
||||
// alert(event.target.value)
|
||||
this.getAudio(event.target.value)
|
||||
// this.selected = event.target.value;
|
||||
},
|
||||
getAudio(age=2){
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
// alert(abID)
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
// this.getVideos()
|
||||
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)
|
||||
|
|
@ -255,16 +230,49 @@ export default {
|
|||
this.faqAudio=data.data
|
||||
// console.log(this.faqAudio)
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
this.getAudio()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
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: rgb(255, 255, 255);
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
margin: 0 auto;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.close {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,41 +18,31 @@
|
|||
</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>
|
||||
<span class="h1-text text-color-1 font-semibold">All Audio Books</span>
|
||||
<p class="font-20px text-color-2 text-justify">Make children well-versed in literacy skills by making them listen to preschool audio books of Literacy that are curated for providing an in-depth knowledge of the subject through interesting stories and rhymes. Engage your little ones at home and preschool with our listening books for preschoolers and make their learning fun. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center">
|
||||
<div v-for="audiobooks in ablitreacy" :key="ablitreacy.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="relative rounded-tl-xl">
|
||||
<label class="grid place-items-center cursor-pointer" :for="audiobooks.file">
|
||||
<img class="w-56 relative" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
<div @click="showAbModal(audiobooks.file)">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" ">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
<!-- <button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24 mb-16">
|
||||
<a href="/premium">
|
||||
<div class="flex prime-bg p-10 relative justify-center">
|
||||
<div class="flex prime-bg p-16 relative justify-center ">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20 w-full">
|
||||
<div v-for="audiobooks in abfliteracy" :key="abfliteracy.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<img class="" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<div class="grid place-items-center">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,10 +50,56 @@
|
|||
</div>
|
||||
</a>
|
||||
</section>
|
||||
<div v-if="abModal" id="abModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<audio controls>
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ abID" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
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: rgb(255, 255, 255);
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
margin: 0 auto;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.close {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
|
|
@ -122,20 +158,36 @@ export default {
|
|||
wsWorld: null,
|
||||
abfliteracy: null,
|
||||
isLoading: true,
|
||||
abModal:false,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
// alert(abID)
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy&limit=5')
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy')
|
||||
.then(resp => resp.json())
|
||||
.then(audiobooks => {
|
||||
this.ablitreacy=audiobooks.data
|
||||
this.ablitreacy=audiobooks.data.reverse().slice(0, 4)
|
||||
// console.log(this.ablitreacy)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy&limit=10')
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy')
|
||||
.then(resp => resp.json())
|
||||
.then(audiobooks => {
|
||||
this.abfliteracy=audiobooks.data
|
||||
this.abfliteracy=audiobooks.data.reverse().slice(4, 8)
|
||||
// console.log(this.abfliteracy)
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -18,41 +18,31 @@
|
|||
</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>
|
||||
<p class="font-20px text-color-2 text-justify">Enhance ideas and learning power of children by stimulating their brain cells with the right understanding of mathematics that they need later in life. Make toddlers listen to the right concepts, numbers, etc. with our preschool audio books that prioritizes learning while entertaining. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center">
|
||||
<div v-for="audiobooks in abmath" :key="abmath.id" class="grid mt-16">
|
||||
<div class="grid place-items-center">
|
||||
<div class="relative rounded-tl-xl">
|
||||
<label class="grid place-items-center cursor-pointer" :for="audiobooks.file">
|
||||
<img class="w-56 relative" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
<span class="h1-text text-color-1 font-semibold">All Audio Books</span>
|
||||
<p class="font-20px text-color-2 text-justify">Make children well-versed in literacy skills by making them listen to preschool audio books of Literacy that are curated for providing an in-depth knowledge of the subject through interesting stories and rhymes. Engage your little ones at home and preschool with our listening books for preschoolers and make their learning fun. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center">
|
||||
<div v-for="audiobooks in abmath" :key="abmath.id" class="grid">
|
||||
<div @click="showAbModal(audiobooks.file)">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" ">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
<!-- <button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24 mb-16">
|
||||
<a href="/premium">
|
||||
<div class="flex prime-bg p-10 relative justify-center">
|
||||
<div class="flex prime-bg p-16 relative justify-center ">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20 w-full">
|
||||
<div v-for="audiobooks in abfmath" :key="abfmath.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<img class="" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<div class="grid place-items-center">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,10 +50,55 @@
|
|||
</div>
|
||||
</a>
|
||||
</section>
|
||||
<div v-if="abModal" id="abModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<audio controls>
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ abID" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
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: rgb(255, 255, 255);
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
margin: 0 auto;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.close {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
|
|
@ -118,23 +153,38 @@ export default {
|
|||
worksheets: null,
|
||||
ablitreacy: null,
|
||||
abmath: null,
|
||||
wsWorld: null,
|
||||
abfmath: null,
|
||||
isLoading: true,
|
||||
abModal:false,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
// alert(abID)
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics&limit=5')
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.abmath=worksheets.data
|
||||
this.abmath=worksheets.data.reverse().slice(0, 4)
|
||||
// console.log(this.abmath)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics&limit=10')
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.abfmath=worksheets.data
|
||||
this.abfmath=worksheets.data.reverse().slice(4, 8)
|
||||
// console.log(this.abfmath)
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -18,41 +18,31 @@
|
|||
</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>
|
||||
<p class="font-20px text-color-2 text-justify">Increase the imaginative power of young creative minds of children, speaking skills and provide them a better comprehension of the world with the listening books for preschoolers in the subject ‘Understanding of the World’ where you get all concepts in the audio form.</p>
|
||||
<span class="h1-text text-color-1 font-semibold">All Audio Books</span>
|
||||
<p class="font-20px text-color-2 text-justify">Make children well-versed in literacy skills by making them listen to preschool audio books of Literacy that are curated for providing an in-depth knowledge of the subject through interesting stories and rhymes. Engage your little ones at home and preschool with our listening books for preschoolers and make their learning fun. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center">
|
||||
<div v-for="audiobooks in abworld" :key="abworld.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<div class="relative rounded-tl-xl">
|
||||
<label class="grid place-items-center cursor-pointer" :for="audiobooks.file">
|
||||
<img class="w-56 relative" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</label>
|
||||
<input type="checkbox" :id="audiobooks.file" class="modal-toggle" />
|
||||
<label :for="audiobooks.file" class="modal">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+audiobooks.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
<div @click="showAbModal(audiobooks.file)">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" ">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
<!-- <button class="bg-blue-700 p-1 text-white pl-4 pr-4 rounded-tl-lg rounded-br-lg ml-6 mt-8"><img class="w-5 pr-1 inline" src="/img/download.png" alt="">Download</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="container mx-auto pt-10 px-6 xl:px-24 mb-16">
|
||||
<a href="/premium">
|
||||
<div class="flex prime-bg p-10 relative justify-center">
|
||||
<div class="flex prime-bg p-16 relative justify-center ">
|
||||
<h1 class="flex text-center justify-center absolute inset-0 pb-40 place-items-center text-4xl text-white">Subscribe To Our Plan <br> To View More</h1>
|
||||
<div class="flex justify-center absolute inset-0 place-items-center">
|
||||
<button class="bg-yellow-500 p-2 px-4 text-xl rounded-br-xl rounded-tl-xl text-white">Subscribe Now</button></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 place-items-center opacity-20 w-full">
|
||||
<div v-for="audiobooks in abfworld" :key="abfworld.id" class="grid">
|
||||
<div class="grid place-items-center">
|
||||
<img class="" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<div class="grid place-items-center">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
<h1 class="text-center pt-4 w-fit">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,10 +50,55 @@
|
|||
</div>
|
||||
</a>
|
||||
</section>
|
||||
<div v-if="abModal" id="abModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<audio controls>
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ abID" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
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: rgb(255, 255, 255);
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
margin: 0 auto;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.close {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
|
|
@ -120,20 +155,36 @@ export default {
|
|||
abworld: null,
|
||||
abfworld: null,
|
||||
isLoading: true,
|
||||
abModal:false,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
// alert(abID)
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=world&limit=5')
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=world')
|
||||
.then(resp => resp.json())
|
||||
.then(audiobooks => {
|
||||
this.abworld=audiobooks.data
|
||||
this.abworld=audiobooks.data.reverse().slice(0, 4)
|
||||
// console.log(this.abworld)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=world&limit=10')
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=world')
|
||||
.then(resp => resp.json())
|
||||
.then(audiobooks => {
|
||||
this.abfworld=audiobooks.data
|
||||
this.abfworld=audiobooks.data.reverse().slice(4, 8)
|
||||
// console.log(this.abfworld)
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<div>
|
||||
<section class="container mx-auto px-4 xl:px-24">
|
||||
<span class="h1-text text-color-1">Mathematics</span>
|
||||
<p class="font-20px text-color-2 text-justify">Learning becomes easy with videos for preschoolers by Teeny Beans Preschool Curriculum that assists in a stronger foundation in Mathematics to instill the accurate skills and knowledge among children and practice time saving learning. </p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 my-16 gap-10 place-items-center px-4">
|
||||
<div v-for="audiobooks in abliteracy" :key="abliteracy.id" class="grid">
|
||||
<div @click="showAbModal(audiobooks.file)">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" ">
|
||||
<img class="w-56" v-if="audiobooks.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ audiobooks.img" alt=""/>
|
||||
</div>
|
||||
<h1 class="pt-4 w-fit font-20px">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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/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>
|
||||
</section>
|
||||
<!-- Modal -->
|
||||
<div v-if="abModal" id="abModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<audio controls>
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ abID" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
abModal:false,
|
||||
abliteracy:null,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
// alert(abID)
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
}
|
||||
|
||||
},
|
||||
mounted: function () {
|
||||
// this.getVideos()
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=literacy')
|
||||
.then(resp => resp.json())
|
||||
.then(audiobooks => {
|
||||
this.abliteracy=audiobooks.data
|
||||
console.log(this.abliteracy)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.abModal {
|
||||
/* display: none; */
|
||||
position: fixed;
|
||||
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: rgb(255, 255, 255);
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
margin: 0 auto;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.close {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -153,6 +153,7 @@ background-color: #C9D438;
|
|||
.bg-slider {
|
||||
background-color: #124BBD;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -192,6 +193,7 @@ background-color: #124BBD;
|
|||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
---
|
||||
const {id, open} = Astro.props;
|
||||
---
|
||||
<style lang="scss">
|
||||
dialog {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
&::backdrop {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<button onclick={`window.${id}.showModal()`}>{open}</button>
|
||||
|
||||
<dialog id='{id}'>
|
||||
<slot name="main" />
|
||||
<form method="dialog">
|
||||
<slot name="close" />
|
||||
</form>
|
||||
</dialog>
|
||||
|
|
@ -43,8 +43,8 @@
|
|||
<div class="grid w-fit" v-for="occassionblog in occassionblog" :key="occassionblog">
|
||||
<img class="w-full rounded-tl-3xl rounded-br-3xl px-4" v-if="occassionblog.img" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+occassionblog.img+'?width=420&height=280'" alt="" >
|
||||
<div class="flex bg-yellow-200 absolute mt-56 lg:mt-40 ml-4 text-lg leading-tight w-14 h-14 font-semibold text-blue-700 rounded-full text-center p-1">{{ occassionblog.date}}</div>
|
||||
<h2 class="text-color-1 text-3xl font-semibold pt-4 px-4">{{ occassionblog.title}}</h2>
|
||||
<div class="text-justify line-clamp-3 font-20px text-color-2 px-4" v-html="occassionblog.meta_description"></div>
|
||||
<h2 class="text-color-1 text-3xl font-semibold pt-4 px-4 line-clamp-2">{{ occassionblog.title}}</h2>
|
||||
<div class="text-justify line-clamp-3 font-20px text-color-2 px-4 line-clamp-4" v-html="occassionblog.meta_description"></div>
|
||||
<a :href="'/blog/' + occassionblog.slug" class="text-blue-600 font-20px px-4">Read More >> </a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -165,20 +165,15 @@
|
|||
<div class="h1-text text-blue-700 font-semibold py-4">Audio Books</div>
|
||||
<h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].audio_books_text}}</h1>
|
||||
<div class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-5 pt-6">
|
||||
<div v-for="aud in audio" :key="audio.id" class="p-2">
|
||||
<label :for="aud.file" >
|
||||
<img class="cursor-pointer rounded-tl-xl rounded-br-xl w-56" v-if="aud.audio_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+aud.audio_icon" alt="">
|
||||
<div class="cursor-pointer text-center text-xl text-color-2">{{aud.title}}</div>
|
||||
</label>
|
||||
<input type="checkbox" :id="aud.file" class="modal-toggle" />
|
||||
<label :for="aud.file" class="modal cursor-pointer">
|
||||
<label class="modal-box relative" for="">
|
||||
<audio controls >
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+aud.file" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</label>
|
||||
</label>
|
||||
<div v-for="aud in audio" :key="audio.id" class="grid">
|
||||
<div @click="showAbModal(aud.file)">
|
||||
<div class="grid place-items-center">
|
||||
<div class=" ">
|
||||
<img class="w-56" v-if="aud.audio_icon" :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ aud.audio_icon" alt=""/>
|
||||
</div>
|
||||
<h1 class="pt-4 w-fit font-20px">{{aud.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/plan">
|
||||
<div>
|
||||
|
|
@ -252,6 +247,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="abModal" id="abModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</span>
|
||||
<audio controls>
|
||||
<source :src="'https://curriculum-app-api.beanstalkedu.com/assets/'+ abID" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script is:inline>
|
||||
|
|
@ -268,7 +272,19 @@ methods: {
|
|||
hideYtModal(){
|
||||
this.ytModal=false
|
||||
// this.ytID=ytID
|
||||
}
|
||||
},
|
||||
showAbModal(abID){
|
||||
this.abModal=true
|
||||
this.abID=abID
|
||||
// alert(abID)
|
||||
},
|
||||
hideAbModal(){
|
||||
this.abModal=false
|
||||
// // this.abID=abID
|
||||
},
|
||||
doNothing(){
|
||||
// alert();
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -286,6 +302,8 @@ methods: {
|
|||
isLoading: true,
|
||||
ytModal:false,
|
||||
ytID:''
|
||||
// abModal:false,
|
||||
abID:''
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -378,6 +396,18 @@ methods: {
|
|||
}
|
||||
</script>
|
||||
<style scopped>
|
||||
.line-clamp-4 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
details {
|
||||
font-weight: lighter;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div>
|
||||
<div @click="showAbModal('abModal')"> Show Modal</div>
|
||||
<!-- Modal -->
|
||||
<div v-if="abModal" id="ytModal" class="flex justify-center abModal">
|
||||
<div class="modal-content" @click="doNothing()">
|
||||
<span @click="hideAbModal" class="close">×</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>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Modal from "../components/Modal.astro";
|
||||
---
|
||||
<Layout title="">
|
||||
<Modal client:visible/>
|
||||
</Layout>
|
||||
|
|
@ -1,12 +1,8 @@
|
|||
---
|
||||
// Component Imports
|
||||
import Modal from '../components/Modal.astro';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import AudioBookModal from '../components/AudioBookModal.vue';
|
||||
---
|
||||
<Layout title="">
|
||||
<AudioBookModal client:visible/>
|
||||
</Layout>
|
||||
|
||||
<Modal id="dialog" open="Open modal">
|
||||
<main slot="main">
|
||||
<p>Some extra content you would like here</p>
|
||||
<hr />
|
||||
</main>
|
||||
<button slot="close">Close modal</button>
|
||||
</Modal>
|
||||
Loading…
Reference in New Issue