update
This commit is contained in:
Suvodip Ghosh
153
src/components/Audio-mathematics.vue
Normal file
153
src/components/Audio-mathematics.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="container-fluid">
|
||||
<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">
|
||||
<div class="flex">
|
||||
<h1 class=" pt-3 font-semibold py-8">Age: </h1>
|
||||
<select class="select max-w-xs bg3">
|
||||
<option>Select your Age</option>
|
||||
<option>2-3 Year</option>
|
||||
<option>3-4 Year</option>
|
||||
<option>4-5 Year</option>
|
||||
<option>5-6 Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="flex ">
|
||||
<h1 class="pt-3 font-semibold py-8">Category: </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>
|
||||
</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>
|
||||
</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">
|
||||
<router-link to="/premium">
|
||||
<div class="flex prime-bg p-10 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 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=""/>
|
||||
<h1 class="text-center pt-4 w-fit">{{audiobooks.title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.bg3 {
|
||||
background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
|
||||
}
|
||||
.font-20px {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.hero-text {
|
||||
font-size: 50px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.hero-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 801px) {
|
||||
.h1-text {
|
||||
font-size: 40px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.h1-text {
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
}
|
||||
.text-color-1 {
|
||||
color: #7C4C23;
|
||||
}
|
||||
.prime-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
// const route = useRoute();
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
worksheets: null,
|
||||
ablitreacy: null,
|
||||
abmath: null,
|
||||
wsWorld: null,
|
||||
abfmath: null,
|
||||
isLoading: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics&limit=5')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.abmath=worksheets.data
|
||||
// console.log(this.abmath)
|
||||
})
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/audio_books?filter[category][_eq]=mathematics&limit=10')
|
||||
.then(resp => resp.json())
|
||||
.then(worksheets => {
|
||||
this.abfmath=worksheets.data
|
||||
// console.log(this.abfmath)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user