Skip to content

Commit

Permalink
Merge pull request #11 from SundarbansWebOps/development
Browse files Browse the repository at this point in the history 
Development
  • Loading branch information
@SundarbansIITM
SundarbansIITM authored Dec 13, 2023
2 parents 1563245 + b2e8d08 commit 14daf61
Show file tree
Hide file tree
Showing 9 changed files with 58 additions and 145 deletions.
6 changes: 6 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"postcss": "^8.4.32",
"tailwindcss": "^3.3.6",
"vue": "^3.2.13",
"vue-google-signin-button": "^1.0.4",
"vue-router": "^4.2.5"
},
"devDependencies": {
Expand Down
6 changes: 0 additions & 6 deletions postcss.config.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
Sundarbans
</a>

<p class="text-sm text-gray-600 dark:text-gray-300">© Copyright 2021. All Rights Reserved.</p>
<p class="text-sm text-gray-600 dark:text-gray-300">© Copyright 2023. All Rights Reserved.</p>

<div class="flex -mx-2">
<a href="#"
Expand Down
38 changes: 17 additions & 21 deletions src/components/HomePage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@
<section class="bg-white dark:bg-black">
<div class="container px-6 py-10 mx-auto">
<h1 class="text-2xl font-semibold text-center text-gray-800 capitalize lg:text-3xl dark:text-white">
Sundarbans Webops Team</h1>
Sundarbans WebOps Team</h1>

<p class="max-w-2xl mx-auto my-6 text-center text-gray-500 dark:text-gray-300">
Meet the Team Behind Your Online Experience.
Expand All @@ -218,15 +218,13 @@
<div
class="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
<img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300"
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
alt="">
src="https://lh3.googleusercontent.com/drive-viewer/AK7aPaCQlTuahPMWboAJnY5_lUo1qP4btc4krP6jC_fRR1Z-dS7y_5YsP_Uwwe37boeYAiP1jFm-7GTRw6DIZS4hwkHLbA0n3Q=s2560"
alt="Ravi Kumawat">

<h1
class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">
arthur melo</h1>
class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">Ravi Kumawat</h1>

<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">design
director</p>
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Full Stack Engineer</p>

<div class="flex mt-3 -mx-2">
<a href="#"
Expand Down Expand Up @@ -267,14 +265,13 @@
<div
class="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
<img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300"
src="https://images.unsplash.com/photo-1531590878845-12627191e687?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
alt="">
src="https://lh3.googleusercontent.com/drive-viewer/AK7aPaDYpJhR2Pf9l0-Dl6kwO-7Z-vOxPhCRzT6lZoPr5w1dAUK2KTaWU4PCurRV_GEunwX-FFsqv0xgzSekqzaTgFGlDn84=s1600"
alt="Pratyaksh Singh">

<h1
class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">
Amelia. Anderson</h1>
class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">Pratyaksh Singh</h1>

<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lead Developer
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Frontend Engineer
</p>

<div class="flex mt-3 -mx-2">
Expand Down Expand Up @@ -316,14 +313,14 @@
<div
class="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
<img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300"
src="https://images.unsplash.com/photo-1488508872907-592763824245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
alt="">
src="https://lh3.googleusercontent.com/drive-viewer/AK7aPaAJepwMfB5XwFMLMnovYjc52sm5SyQ0GiLe24eKh--WobRpGWitYkCTnZ3qh1uonR77OwNZmIpa2qa9VyEuAv5YsJXW=s2560"
alt="Mahendra Khara">

<h1
class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">
Olivia Wathan</h1>
Mahendra Khara</h1>

<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lead designer
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Backend Engineer
</p>

<div class="flex mt-3 -mx-2">
Expand Down Expand Up @@ -365,15 +362,14 @@
<div
class="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
<img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300"
src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
src="https://lh3.googleusercontent.com/drive-viewer/AK7aPaC-Fg0LKhKLzQh12pwvBM8hsqvoJYZWi9WOGYfdYfK73hbKJI1Z0M15wxwsVP6sgNVmuHsmjRXhPtY8uJs5MKo0u4XWUQ=s1600"
alt="">

<h1
class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">
John Doe</h1>
Prajjwal Yadav</h1>

<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Full stack
developer</p>
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Frontend Engineer</p>

<div class="flex mt-3 -mx-2">
<a href="#"
Expand Down Expand Up @@ -547,7 +543,7 @@ import NavBar from './NavBar.vue';
export default {
name: 'HomePage',
components:{
NavBar
NavBar,
}
}
</script>
Expand Down
6 changes: 3 additions & 3 deletions src/components/NavBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@
</router-link>
</div>
<div class="mt-4 lg:mt-0 lg:ml-8">
<a
href="#"
<router-link
to="/google"
class="flex items-center justify-center px-2 text-gray-600 transition-colors duration-300 transform border rounded-lg dark:border-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600"
>
<div class="px-1 py-1">
Expand All @@ -74,7 +74,7 @@
d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
fill="#1976D2"></path>
</svg></div><span class="w-5/6 px-1 py-2 font-bold text-center">Sign In</span>
</a>
</router-link>
</div>
</div>
</nav>
Expand Down
134 changes: 29 additions & 105 deletions src/components/VideoGallery.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,124 +41,26 @@
</div>

<div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-2">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden" v-for="(video, index) in videos.slice(0, 2)" :key="index"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/6N-PfwyjsIQ?si=9TZ9-A541tzlhkCU" allowfullscreen></iframe>
</div>

<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/RLBxlaK_aU4?si=NF0U6NkSsvkvSNHZ" allowfullscreen></iframe>
:src="video.video_url" allowfullscreen></iframe>
</div>
</div>
</div>

<div class="container px-5 py-10 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="p-4 md:w-1/2 lg:w-1/3 w-full" v-for="video in videos.slice(2)" :key="video.id">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/TvkTrLJonbw?si=4k-pqv4Sm3IxT1J3"
allowfullscreen></iframe>
:src="video.video_url"
allowfullscreen>
</iframe>

</div>
</div>
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/kEsry2TSVKU?si=AvUDyr9nmcz3wMjv"
allowfullscreen></iframe>

</div>
</div>
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/QW4T_FQzi2I?si=AozEo2ZoQhIfZHas"
allowfullscreen></iframe>
</div>
</div>
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/rZdih019rz4?si=Bi5QHuM6YXaO0uTX"
allowfullscreen></iframe>
</div>
</div>
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/CjrkFsttQg4?si=8XT1ewH1ruANcTO7"
allowfullscreen></iframe>

</div>
</div>
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/SJMnKak4cfc?si=JUK299ytKNqJbuFK"
allowfullscreen></iframe>

</div>
</div>
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/_zen9nEBQHU?si=XDeVY5V-yuLo9mVA"
allowfullscreen></iframe>
</div>
</div>
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/G-3sYegnj8A?si=3ZvlkTwxcwr0tRq7"
allowfullscreen></iframe>
</div>
</div>
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/YGnkgpawqho?si=TsVrky1ITcf47VuY"
allowfullscreen></iframe>

</div>
</div>
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/eWzDPTpJ31E?si=7Ti-Pp36Xz6KDDkX"
allowfullscreen></iframe>

</div>
</div>
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/XpezmSKoR28?si=UCrgV8AxSXqSEz5g"
allowfullscreen></iframe>
</div>
</div>
<div class="p-4 md:w-1/2 lg:w-1/3 w-full">
<div class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://www.youtube.com/embed/GCwvQCNZxOw?si=2XFO6Igf8yn8By6s"
allowfullscreen></iframe>
</div>
</div>
</div>
</div>

Expand All @@ -170,11 +72,33 @@
</template>

<script>
import axios from 'axios';
import NavBar from './NavBar.vue';
export default {
name: 'VideoGallery',
components: {
NavBar
},
data() {
return {
videos: [],
};
},
async mounted() {
try {
const url = 'http://35.78.186.233/videos';
const config = {
headers: {
'Content-Type': 'application/json',
}
};
const result = await axios.get(url, config);
this.videos = result.data.videos;
console.log(this.videos);
} catch (error) {
console.error('Error fetching videos:', error);
}
}
}
</script>
</script>
1 change: 1 addition & 0 deletions src/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import CouncilPage from './components/CouncilPage.vue'




import { createRouter, createWebHistory } from 'vue-router'


Expand Down
9 changes: 0 additions & 9 deletions tailwind.config.js
View file

This file was deleted.

0 comments on commit 14daf61

Please sign in to comment.