h f and gallery

Check Link

@@ -0,0 +1,4 @@
+https://sreechaitanyacollege.in/activity-gallery
+https://sreechaitanyacollege.in/gallery
+https://sreechaitanyacollege.in/student-grievance
+https://sreechaitanyacollege.in/gallery

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col h-screen justify-between">
    <Header />
     <main>
       <router-view />

src/components/Footer.vue

@@ -4,7 +4,7 @@
             <div
                 class="grid grid-cols-1 md:grid-cols-3 bg-stone-600 "
             >
-                <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Important Links<hr class="blue-400">
+                <div class="bg-stone-800 rounded-md  h-48 m-6 text-gray-100 text-left text-xl p-3">Important Links<hr class="blue-400">
                     <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
                         <a href="gallery">Gallery <hr class="border-slate-900"></a>
                         <a href="notice">Notice <hr class="border-slate-900"></a>
@@ -26,6 +26,11 @@
                     </div>
                 </div>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 bg-stone-600 place-items-center text-gray-100 -mt-4 ">
+                <a href=""><div class="">© sreechaitanyacollege.in &nbsp |<hr> </div></a>
+                <a href=""><div class="">	Powered by DWD Consultancy Services &nbsp | <hr></div></a>
+                <a href=""><div class=""> Count 112964 &nbsp  | Site Performance &nbsp <hr> </div></a>
+            </div>
         </div>
     </div>
 </template>

src/components/Header.vue

@@ -1,8 +1,10 @@
 <template>
     <header>
+        <div class="flex shadow p-2 lg:hidden bg-blue-700 text-white font-semibold place-items-center gap-7 "><img src="/img/logo3.png" alt="" class="w-12"> <p class=""> SREE CHAITANYA COLLEGE</p>
+            <div class=""> <button class="hover:bg-white hover:text-blue-700 rounded-full p-1">Log In</button> </div>
+        </div>
         <div
-            class="flex flex-cols bg-blue-600 h-48 text-right justify-end text-white text-3xl pt-5 font-semibold pr-12"
+            class="hidden lg:block flex flex-cols bg-blue-600 h-48 text-right justify-end text-white text-3xl pt-5 font-semibold pr-12">
-        >
             <img
                 src="/img/logo3.png"
                 alt="/img/logo3.png"

src/pages/[id].vue

@@ -1,7 +1,7 @@
 <template>
 <div class="container-fluid bg-white mx-auto mt-3  p-0">
     <div v-if="isLoading">
-        <h2>Loading ...</h2>
+        <h2 class="ml-28 text-4xl">Loading ...</h2>
     </div>
     <div v-else>
         <div v-html="page[0].content" class="container mx-auto">

src/pages/gallery.vue

@@ -0,0 +1,234 @@
+<template>
+    <div>
+
+        <div
+            class="grid place-items-center bg-blue-700  w-48 text-4xl font-bold text-white rounded-full p-1 md:mt-8 absolute md:inset-x-2/4 top-56 md:-ml-28 -mt-40 inset-x-2/4 top-72 -ml-28 gap-4">
+            Gallery</div>
+        <section class="overflow-hidden text-gray-700 mt-32">
+            <div class="container px-5 py-2 mx-auto lg:pt-12 lg:px-32">
+                <div class="flex flex-wrap -m-1 md:-m-2">
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/1.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/2.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/3.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/4.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/5.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/6.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/7.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/8.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/9.jpg">
+                        </div>
+                    </div>
+
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/11.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/12.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/13.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/14.jpg">
+                        </div>
+                    </div>
+
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/15.jpeg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/16.jpeg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/17.jpeg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/18.jpeg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/19.jpeg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/20.jpeg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/21.jpeg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/22.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/23.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/24.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/25.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/26.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/27.jpg">
+                        </div>
+                    </div>
+
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/28.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/29.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/30.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/31.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/32.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/32.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/33.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/34.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/35.jpg">
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap w-1/3">
+                        <div class="w-full p-1 md:p-2">
+                            <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
+                                src="/img/36.jpg">
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </section>
+    </div>
+</template>

src/pages/notice/[id].vue

@@ -8,11 +8,20 @@
 
 
             </div>
-            <div v-if="page[0].attachments">
+            <div v-if="files">
-                    <div  v-html="page[0].attachments[0]"> </div>
+                <h2>Attachments</h2>
+                <div v-for="(file, index) in files">
+                    {{index+1}}<a :href="'https://api8.siliconpin.com/assets/' + file.directus_files_id">
+                        <h3> {{ file.directus_files_id }}</h3>
+                    </a>
+
+
+
 
                 </div>
-                <div>{{page[0].attachments[0]}}</div>
+
+            </div>
+            <!-- <div>{{page[0].attachments[0]}}</div> -->
         </div>
     </div>
 </template>
@@ -22,18 +31,42 @@
     data() {
         return {
             page: null,
+            fileAttached:false,
+            files: [],
             isLoading: true
         }
     },
     mounted: function () {
         fetch('https://api8.siliconpin.com/items/scc22?filter[slug][_eq]=' + this.$route.params.id)
-            // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
             .then(response => response.json())
             .then(data => {
                 this.page = data.data
-              console.log(data)
                 this.isLoading = false
+
+                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + this.page[0].id)
+                    .then(resp => resp.json())
+                    .then(file => {
+                        this.files = file.data
+                        this.fileAttached=true
+                        // attach.data.forEach(fileID=> this.files.push(fileID.directus_files_id))
+                        console.log(file.data)
+                        // this.attachments.push(attach.data[0].directus_files_id)
                     })
+                if(fileAttached){}
+                // console.log(Object.assign({}, this.files))
+                // console.log(this.files)
+            })
+    },
+    methods: {
+        // getAttachments(att) {
+
+        //     console.log(att)
+        //     // fetch('https://api8.siliconpin.com/items/ecom55?filter[slug][_eq]=' + this.$route.params.id)
+        //     //     .then(response => response.json())
+        //     //     .then(data => this.itemByCategory = data)
+        //     // console.log(this.itemByCategory)
+
+        // }
     }
 }
 </script>