audio modal
This commit is contained in:
Suvodip Ghosh
@@ -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)
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user