add-pdf-viewer-in-iframe

Reviewed-on: #2

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "ansible.python.interpreterPath": "/bin/python"
+}

astro.config.mjs

@@ -8,7 +8,10 @@ import vue from "@astrojs/vue";
 
 // https://astro.build/config
 
+// https://astro.build/config
+import partytown from "@astrojs/partytown";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), vue()]
+  integrations: [tailwind(), vue(), partytown()]
 });

package-lock.json

@@ -1,18 +1,24 @@
 {
-  "name": "@example/basics",
+  "name": "sreechaitanyacollege.in",
   "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "@example/basics",
+      "name": "sreechaitanyacollege.in",
       "version": "0.0.1",
       "dependencies": {
+        "@astrojs/partytown": "^1.2.1",
         "@astrojs/tailwind": "^2.1.3",
         "@astrojs/vue": "^1.2.2",
+        "@headlessui/vue": "^1.7.13",
+        "@heroicons/vue": "1.0.6",
         "astro": "^1.7.2",
         "tailwindcss": "^3.2.4",
         "vue": "^3.2.45"
+      },
+      "devDependencies": {
+        "sass": "^1.57.1"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -101,6 +107,15 @@
         "vfile-message": "^3.0.0"
       }
     },
+    "node_modules/@astrojs/partytown": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/partytown/-/partytown-1.2.1.tgz",
+      "integrity": "sha512-sFs4RKaahYOrHKy5rM6xf5xDavKpUICVxS0P0tQec5z3+FRq1Eo57MDTCx2QJoIhOHd3+/GgXDRHKWpbFI4RCw==",
+      "dependencies": {
+        "@builder.io/partytown": "^0.7.4",
+        "mrmime": "^1.0.0"
+      }
+    },
     "node_modules/@astrojs/prism": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-1.0.2.tgz",
@@ -605,6 +620,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@builder.io/partytown": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/@builder.io/partytown/-/partytown-0.7.6.tgz",
+      "integrity": "sha512-snXIGNiZpqjno3XYQN2lbBB+05hsQR/LSttbtIW1c0gmZ7Kh/DIo0YrxlDxCDulAMFPFM8J+4voLwvYepSj3sw==",
+      "bin": {
+        "partytown": "bin/partytown.cjs"
+      }
+    },
     "node_modules/@emmetio/abbreviation": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz",
@@ -656,6 +679,25 @@
         "node": ">=12"
       }
     },
+    "node_modules/@headlessui/vue": {
+      "version": "1.7.13",
+      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.13.tgz",
+      "integrity": "sha512-obG5TdPdBDfs+jiA1mY29LPFqyJl93Q90EL86ontfRe1B6XvbjPkx+x1aAC5DA18bXbb0Juni1ayDbXo0w1u0A==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/@heroicons/vue": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.6.tgz",
+      "integrity": "sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==",
+      "peerDependencies": {
+        "vue": ">= 3"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -2931,6 +2973,12 @@
         }
       ]
     },
+    "node_modules/immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+      "devOptional": true
+    },
     "node_modules/import-meta-resolve": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-2.2.0.tgz",
@@ -5307,6 +5355,23 @@
         }
       ]
     },
+    "node_modules/sass": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+      "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sass-formatter": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.5.tgz",
@@ -6464,6 +6529,15 @@
         "vfile-message": "^3.0.0"
       }
     },
+    "@astrojs/partytown": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/partytown/-/partytown-1.2.1.tgz",
+      "integrity": "sha512-sFs4RKaahYOrHKy5rM6xf5xDavKpUICVxS0P0tQec5z3+FRq1Eo57MDTCx2QJoIhOHd3+/GgXDRHKWpbFI4RCw==",
+      "requires": {
+        "@builder.io/partytown": "^0.7.4",
+        "mrmime": "^1.0.0"
+      }
+    },
     "@astrojs/prism": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@astrojs/prism/-/prism-1.0.2.tgz",
@@ -6832,6 +6906,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@builder.io/partytown": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/@builder.io/partytown/-/partytown-0.7.6.tgz",
+      "integrity": "sha512-snXIGNiZpqjno3XYQN2lbBB+05hsQR/LSttbtIW1c0gmZ7Kh/DIo0YrxlDxCDulAMFPFM8J+4voLwvYepSj3sw=="
+    },
     "@emmetio/abbreviation": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz",
@@ -6865,6 +6944,18 @@
       "integrity": "sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==",
       "optional": true
     },
+    "@headlessui/vue": {
+      "version": "1.7.13",
+      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.13.tgz",
+      "integrity": "sha512-obG5TdPdBDfs+jiA1mY29LPFqyJl93Q90EL86ontfRe1B6XvbjPkx+x1aAC5DA18bXbb0Juni1ayDbXo0w1u0A==",
+      "requires": {}
+    },
+    "@heroicons/vue": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.6.tgz",
+      "integrity": "sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==",
+      "requires": {}
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -8436,6 +8527,12 @@
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
+    "immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+      "devOptional": true
+    },
     "import-meta-resolve": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-2.2.0.tgz",
@@ -9932,6 +10029,17 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
     },
+    "sass": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+      "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+      "devOptional": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-formatter": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.5.tgz",

package.json

@@ -12,9 +12,13 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/partytown": "^1.2.1",
     "@astrojs/tailwind": "^2.1.3",
     "@astrojs/vue": "^1.2.2",
+    "@headlessui/vue": "^1.7.13",
+    "@heroicons/vue": "1.0.6",
     "astro": "^1.7.2",
+    "js-cookie": "^3.0.5",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.45"
   },

public/.htaccess

@@ -0,0 +1,8 @@
+RewriteEngine On
+#RewriteCond %{HTTPS} !=on
+#RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
+RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
+RewriteRule ^(.*)$ https://%1/$1 [R=301,L]
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^(.*) /404.html

public/favicon.svg

@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
-  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
-  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
-  <defs>
-    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#000"/>
-      <stop offset="1" stop-color="#000" stop-opacity="0"/>
-    </linearGradient>
-  </defs>
-	<style>
-    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
-  </style>
-</svg>

src/components/DocumentsPage.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="container bg-white mx-auto  text-blue-900 leading-loose text-xl">
+        <!-- <h2 class="text-2xl text-blue-900">All pages having Documents / file Attachments are listed below:</h2> -->
+        <br>
+        <br>
+        <br>
+        <div v-if="isLoading">
+            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Loading ...</h2>
+        </div>
+        <div v-else>
+            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Documents</h2>
+            <div  v-for="(item, index) in page" >
+                <a :href="'/documents/'+item.slug"> <h3> {{item.title}}</h3> </a>
+                
+
+           
+                
+
+            </div>
+            <!-- <div v-html="page[0].content" class="container mx-auto"></div> -->
+        </div>
+    </div>
+    </template>
+    
+    <script>
+    export default {
+        data() {
+            return {
+                page: null,
+                isLoading: true
+            }
+        },
+        mounted: function () {
+            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=documents&limit=-1')
+            // 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
+            })
+        }
+    }
+    </script>

src/components/Footer.astro

@@ -1,36 +1,10 @@
-<template>
+---
-  <footer>
+import FooterComponent from "./FooterComponent.vue"
-      <div>
+---
-          <div
+
-              class="grid grid-cols-1 md:grid-cols-3 bg-stone-600 "
+<section class="">
-          >
+    <FooterComponent client:visible />
-              <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">
+</section>
-                  <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
+<style>
-                      <router-link to="/gallery">Gallery <hr class="border-slate-900"></router-link>
+
-                      <a href="/notice">Notice <hr class="border-slate-900"></a>
+</style>
-                      <a href="/documents">Documents</a>
-                  </div>
-                  </div>
-              <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Related Sites<hr>
-                  <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
-                      <a href="https://www.wbsubregistration.org/">W.B.S.U<hr class="border-slate-900"></a>
-                      <a href="https://www.ugc.ac.in/">U.G.C.<hr class="border-slate-900"></a>
-                      <a href="https://banglaruchchashiksha.wb.gov.in/">W.B.H.E.D.</a>
-                  </div>
-              </div>
-              <div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Document Links <hr>
-                  <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
-                      <router-link to="/documents/aqar">AQAR<hr class="border-slate-900"></router-link>
-                      <router-link to="/documents/iqac">IQAC<hr class="border-slate-900"></router-link>
-                      <router-link to="/documents/academic-calendar">Academic Calendar</router-link>
-                  </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 <hr> </div></a>
-              <a href="https://dwd.siliconpin.com"><div class="">	Powered by DWD Consultancy Services  <hr></div></a>
-              <a href=""><div class=""> Count 112964  | Site Performance  <hr> </div></a>
-          </div>
-      </div>
-  </footer>
-</template>

src/components/FooterComponent.vue

@@ -0,0 +1,97 @@
+<template>
+    <section class="container mx-auto px-4 my-6">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-4">
+            <div class="grid border-4 border-blue-700 rounded-xl ">
+                <p class="bg-blue-700 text-white px-6 py-2 text-2xl font-bold"><span class="underline decoration-4 decoration-[#7c4c23]">Latest Notice</span><span class="shape text-2xl font-bold p-1 rounded-full h-fit">*</span></p>
+                <div  class="flex flex-col h-[250px] overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
+                    <a v-for="data in notice" :key="notice.id" target="_blank" :href="'/notice/'+data.slug" class="px-6 text-xl text-blue-700 hover:underline">{{data.title}}</a>
+                </div>
+                <a href="/notice" class="flex justify-end bg-blue-50 pt-2"> <span class="bg-blue-700 text-white px-4 py-2 rounded-tl-md font-bold">View All</span> </a>
+            </div>
+            <div class="grid border-4 border-blue-700 rounded-xl h-fit">
+                <p class="shape bg-blue-700 text-white px-6 py-2 text-2xl font-bold underline decoration-4 decoration-[#7c4c23]">Important Links</p>
+                <div class="flex flex-col h-[300px] overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
+                    <a v-for="data in important" :key="important.id" target="_blank" :href="'/'+data.slug" class="px-6 text-xl text-blue-700 hover:underline">{{data.title}}</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <div class="container-fluid bg-stone-600">
+        <div class="">
+            <div class="container mx-auto px-4 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">Other's 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>
+                        <a href="/documents">Documents</a>
+                    </div>
+                </div>
+                <div class="bg-stone-800 rounded-md  h-44 m-6 text-gray-100 text-left text-xl p-3">Related Sites<hr>
+                    <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
+                        <a href="https://www.wbsubregistration.org/">W.B.S.U<hr class="border-slate-900"></a>
+                        <a href="https://www.ugc.ac.in/">U.G.C.<hr class="border-slate-900"></a>
+                        <a href="https://banglaruchchashiksha.wb.gov.in/">W.B.H.E.D.</a>
+                    </div>
+                </div>
+                <div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Document Links <hr>
+                    <div class="grid grid-rows-3 text-blue-600 p-3 gap-4">    
+                        <a href="/documents/aqar">AQAR<hr class="border-slate-900"></a>
+                        <a href="/documents/iqac">IQAC<hr class="border-slate-900"></a>
+                        <a href="/documents/academic-calendar">Academic Calendar</a>
+                    </div>
+                </div>
+            </div>
+            <div class="container mx-auto px-4 flex flex-col md:flex-row place-items-center md:place-content-between bg-stone-600 text-gray-100 -mt-4 ">
+                <a href=""><span class="">© sreechaitanyacollege.in <hr> </span></a>
+                <a href="https://dwd.siliconpin.com"><span class="">Powered by DWD Consultancy Services  <hr></span></a>
+                <a href=""><span class=""> Count 112964  | Site Performance  <hr> </span></a>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            notice: null,
+            important: null,
+            isLoading: true,
+            lpModal:false,
+
+
+        }
+    },
+    methods: {   
+    },
+    mounted: function () {
+        fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice')
+            .then(resp => resp.json())
+            .then(data => {
+                this.notice=data.data.reverse();
+                // console.log(this.dailyplan)
+            }),
+            fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[position][_eq]=important')
+            .then(resp => resp.json())
+            .then(data => {
+                this.important=data.data.reverse()
+                // console.log(this.dailyplan)
+            })
+            
+            }
+       
+        }
+    
+</script>
+<style>
+    .shape {
+        -webkit-animation: shape 3ss forwards;
+        animation: shape 2s infinite;
+        color: rgb(255, 0, 0);
+    }
+    @keyframes shape {
+        50%{color: red(187, 224, 85); }
+        50%{color: rgb(255, 255, 255); }
+        /* 50%{color: rgb(0, 255, 34);} */
+    }
+</style>

src/components/MainMenu.astro

@@ -0,0 +1,345 @@
+
+<main>
+  <div>
+    <div class="topBar1 flex flex-col bg-blue-700 border-b shadow-lg w-full py-3 place-items-center justify-center">
+      <div class="flex flex-row gap-x-4 place-items-center">
+        <a href="/"><img class="shadow-2xl shadow-white rounded-full hover:scale-105 duration-700 w-10 h-10" src="/img/logo3.png" alt="Sreechaitanya College Logo" /></a>
+        <h1 class="text-xl font-bold text-white uppercase">sreechaitanya college</h1>
+      </div>
+      <h3 class="text-md text-white text-center">Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B</h3>
+    </div>
+
+    <div class="topBar2 container-fluid bg-blue-700 py-4">
+      <div class="container mx-auto px-4 flex flex-row gap-x-4 place-content-between place-items-center text-white">
+        <a href="/"><img class="shadow-2xl shadow-white/70 rounded-full hover:scale-105 duration-700" src="/img/logo3.png" alt="Sreechaitanya College Logo" /></a>
+        <div>
+          <h1 class="text-3xl lg:text-4xl xl:text-5xl font-bold">Sree Chaitanya College,Habra</h1>
+          <h2 class="text-3xl font-bold">(Arts and Science)</h2>
+          <h3  class="text-2xl font-bold">Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B</h3>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+  <section class="container-fluid" style="background-color: #173382;"> 
+    <div class="navbar shadow-xl zindex xl:container xl:mx-auto">
+ 
+      <!-- Navbar logo -->
+      <div class="nav-header">
+        <div class="nav-logo">
+        </div>
+      </div>
+   
+      <!-- responsive navbar toggle button -->
+      <input type="checkbox" id="nav-check">
+      <div class="nav-btn">
+        <label for="nav-check">
+          <span></span>
+          <span></span>
+          <span></span>
+        </label>
+      </div>
+   
+      <!-- Navbar items -->
+      <div class="nav-links">
+        <a href="/">Home </a>
+        <a href="/about-us">About </a>
+        <a href="/contact-us">Contact Us </a>
+        <a href="/notice">Notice </a>
+        <a href="/library">Library</a>
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Administration 
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content" >
+            <a href="/governing-body">Governing Body</a>
+            <a href="/composition-of-gb">Composition of GB</a>
+            <a href="/staff">Staff</a>
+            <a href="/working-hour">Working Hour</a>
+          </div>
+        </div>
+        <!-- <a href="https://center.rgyci.org/center_list">Center List</a> -->
+        <!-- Dropdown menu -->
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Academics 
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="/departments">Departments & Faculty</a>
+            <a href="/admission">Admission</a>
+            <a href="/librarians">Librarians</a>
+            <a href="/course-offered">Course Offered</a>
+            <a href="/subject-combinationhons">Subject Combination(Hons)</a>
+            <a href="/subject-combinationgen">Subject Combination(Gen)</a>
+            <a href="/intake-capacity">Intake Capacity</a>
+            <a href="/academic-calender">Academic Calendar</a>
+            <a href="/prospectus">Prospectus</a>
+            <a href="/Marks-Distribution">Marks Distribution</a>
+            <a href="/result">Result</a>             
+          </div>
+        </div>
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Organizations 
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="/iqac">IQAC</a>
+            <a href="/naac">NAAC</a>
+            <a href="/ncc">NCC</a>
+            <a href="/nss">NSS</a>
+            <a href="/nirf-data">NIRF</a>
+            <a href="/aqar">AQAR</a>
+            <a href="/students-union">Student's Union</a>
+            <a href="/teachers-council">Teacher's Council</a>
+            <a href="/alumni-association">Alumni Association</a>
+            <a href="/gallery">Image Gallery</a>            
+          </div>
+        </div>
+        <div class="dropdown">
+          <a class="dropBtn" href="#">Facilities 
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="/facilities">Facilities</a>
+            <a href="/rti">RTI</a>           
+          </div>
+        </div>
+        <div class="dropdown">
+            <a class="dropBtn" href="#">Students
+              <i class="fas fa-angle-down"></i>
+            </a>
+            <div class="drop-content">
+                <a href="/admission">Admission</a>
+                <a href="/activities">Activities</a>
+                <a href="/students-union">Student's Union</a>
+                <a href="/student-grievance">Students Suggestion / Grievance</a>
+                <a href="/students-feedback">Student's Feedback</a>
+                <a href="/students-health-home">Student's Health Home</a>
+                <a href="/code-of-conduct">Code of Conduct</a>
+                <a href="/holiday-list">Holiday List</a>
+                <a href="/gallery">Image Gallery</a>         
+            </div>
+        </div>
+
+        <!-- <div class="dropdown">
+          <a class="dropBtn" href="#">Login
+            <i class="fas fa-angle-down"></i>
+          </a>
+          <div class="drop-content">
+            <a href="https://center.rgyci.org/form/teacher_login">Teacer</a>
+            <a href="https://center.rgyci.org/form/center_login">Students</a>
+          </div>
+        </div> -->
+      </div>
+      
+    </div>
+  </section>
+    
+</main>
+<script is:inline>
+</script>
+<style>
+  @media only screen and (max-width: 750px) {
+    .topBar1{
+      display: flex;
+    }
+    .topBar2 {
+      display: none;
+    }
+  }
+  @media only screen and (min-width: 751px) {
+    .topBar1{
+      display: none;
+    }
+    .topBar2 {
+      display: flex;
+    }
+  }
+
+
+
+
+    .drop-content {
+      color: black;
+      width: fit-content;
+    }
+    .zindex {
+        z-index: 1;
+    }
+    *{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+/* body{
+  background-image: url(background-img.jpg);
+  background-size: cover;
+  background-attachment: fixed;
+} */
+.navbar{
+  height: 70px;
+  width: 100%;
+  padding: 25px 10px;
+  background-color: #173382;
+  position: relative;
+}
+.navbar .nav-header{
+  display: inline;
+}
+.navbar .nav-header .nav-logo{
+  display: inline-block;
+  margin-top: -7px;
+}
+.navbar .nav-links{
+  display: inline;
+  float: right;
+  font-size: 16px;
+}
+ 
+.navbar .nav-links .loginBtn{
+  display: inline-block;
+  padding: 5px 15px;
+  margin-left: 20px;
+  font-size: 17px;
+  color: rgb(255, 255, 255);
+}
+.navbar .nav-links a {
+  border-radius: 5px;
+  /* background-color: #0ea5e930; */
+  width: 100%;
+  padding: 12px 4px;
+  width: fit-content;
+  text-decoration: none;
+  font-weight: 550;
+  color: white;
+}
+/* Hover effects */
+.navbar .nav-links a:hover{
+  background-color: #0ea5e950;
+  width: 100%;
+  border-radius: 10px;
+}
+ 
+/* responsive navbar toggle button */
+.navbar #nav-check, .navbar .nav-btn{
+  display: none;
+}
+ 
+@media (max-width:960px) {
+  .navbar .nav-btn{
+    display: inline-block;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+  }
+  .navbar .nav-btn label {
+    display: inline-block;
+    width: 80px;
+    height: 70px;
+    padding: 25px;
+  }
+  .navbar .nav-btn label span {
+    display: block;
+    height: 10px;
+    width: 25px;
+    border-top: 3px solid #eee;
+  }
+  .navbar .nav-btn label:hover, .navbar #nav-check:checked ~ .nav-btn label {
+    background-color: rgb(9, 14, 90);
+    transition: all 0.5s ease;
+  }
+  .navbar .nav-links{
+    position: absolute;
+    display: block;
+    text-align: center;
+    width: 100%;
+    background-color: rgb(9, 14, 90);
+    transition: all 0.3s ease-in;
+    overflow-y: hidden;
+    top: 70px;
+    right: 0px;
+  }
+  .navbar .nav-links a {
+    display: block;
+  }
+ 
+  /* when nav toggle button not checked */
+  .navbar #nav-check:not(:checked) ~ .nav-links {
+    height: 0px;
+  }
+ 
+  /* when nav toggle button is checked */
+  .navbar #nav-check:checked ~ .nav-links {
+    height: fit-content;
+    overflow-y: auto;
+  }
+  .navbar .nav-links .loginBtn {
+    padding: 10px 40px ;
+    margin: 20px;
+    font-size:  18px;
+    font-weight: bold;
+    color: rgb(9, 14, 90);
+  }
+  /* Responsive dropdown code */
+  .navbar .nav-links .dropdown, .navbar .nav-links .dropdown2 {
+    float: none;
+    width: 100%;
+  }
+  .navbar .nav-links .drop-content, .navbar .nav-links .drop-content2 {
+    position: relative;
+    background-color: rgb(220, 220, 250);
+    top: 0px;
+    left: 0px;
+  }
+  /* Text color */
+  .navbar .nav-links .drop-content a {
+    color: rgb(9, 14, 90);
+  }  
+ 
+}
+ 
+/* Dropdown menu CSS code */
+.dropdown{
+  position: relative;
+  display: inline-block;
+  color: black;
+}
+.drop-content, .drop-content2 {
+  display: none;
+  position: absolute;
+  background-color: #172554;
+  color: black;
+  min-width: 200px;
+  width: 100%;
+  font-size: 16px;
+  top: 34px;
+  z-index: 1;
+  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
+}
+/* on hover show dropdown */
+.dropdown:hover .drop-content, .dropdown2:hover .drop-content2 {
+  display: block;
+}
+/* drondown links */
+.drop-content a {
+  padding: 12px 10px;
+  /* width: 200px;
+  border-bottom: 1px solid rgb(197, 197, 250); */
+  display: block;
+  transition: all 0.5s ease !important;
+}
+.dropBtn .drop-content a:hover {
+  background-color: rgb(230, 230, 230);
+}
+.dropdown:hover .dropBtn, .dropdown2:hover .dropBtn2 {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.dropdown2 .drop-content2 {
+  position: absolute;
+  left: 120px;
+  top: 126px;
+}
+.dropBtn2 i {
+  margin-left: 15px;
+}
+</style>

src/components/NoticeIDPage.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="container mx-auto px-4 text-justify">
+        <!-- <div v-for="files in file" :key="file.id">
+            <a :href="'https://api8.siliconpin.com/assets/'+files[0]">wsrvfsgv</a>
+        </div> -->
+        <div v-if="isLoading" class="">
+            <div class="text-center text-2xl flex flex-col justify-center place-items-center">
+                <svg class="animate-spin delay-1000 mt-24" fill="#1068c6" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 26.349 26.35" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <circle cx="13.792" cy="3.082" r="3.082"></circle> <circle cx="13.792" cy="24.501" r="1.849"></circle> <circle cx="6.219" cy="6.218" r="2.774"></circle> <circle cx="21.365" cy="21.363" r="1.541"></circle> <circle cx="3.082" cy="13.792" r="2.465"></circle> <circle cx="24.501" cy="13.791" r="1.232"></circle> <path d="M4.694,19.84c-0.843,0.843-0.843,2.207,0,3.05c0.842,0.843,2.208,0.843,3.05,0c0.843-0.843,0.843-2.207,0-3.05 C6.902,18.996,5.537,18.988,4.694,19.84z"></path> <circle cx="21.364" cy="6.218" r="0.924"></circle> </g> </g> </g></svg>
+                Loading....
+            </div>
+        </div>
+        <div v-else="content" class="py-10">
+            <p class="text-center text-2xl font-bold pb-4 font-smooth underline">{{ page.title }}</p>
+            <div class="flex flex-col justify-center place-items-center w-[100%] " v-html="content"></div>
+        </div>
+        <div v-if="fileAttached">
+                <h2>Attachments.</h2>
+                <div>
+                    <div v-for="(file, index) in files">
+                        {{index+1}}. 
+                            <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
+                                {{ file.filename_download }}
+                            </a>
+                    </div>
+
+                </div>
+
+            </div>
+        
+    </div>
+</template>
+    
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            attachment:null,
+            fileAttached:false,
+            content:null,
+            isLoading: true,
+            fileAttached: false,
+            file: null,
+        }
+    },
+    mounted: function () {
+        let path=window.location.pathname.split('/');
+        // console.log(path[2]);
+
+        // fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
+        let queryP='https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&filter[slug][_eq]='+path[2];
+        fetch(queryP)
+            .then(response => response.json())
+            .then(data => {
+          this.page = data.data[0]
+          this.content = this.page.content
+          this.file = this.page.attachments
+        //   console.log(this.file)
+          this.isLoading = false
+          return this.page.id
+        })
+            .then((pageID) => {
+                console.log(pageID)
+                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
+                .then(resp => resp.json())
+                    .then(file => {
+                        console.log(file)
+                            let attIDs = ''
+                            let t = 0
+                            file.data.forEach(ids => {
+                                if (t == 0) attIDs = ids.directus_files_id
+                                else attIDs = attIDs + ',' + ids.directus_files_id
+                                t++
+                            });
+                            if(t>0) this.fileAttached=true
+                            
+                        return attIDs
+                    })
+                        .then((attIDs) => {
+                            fetch('https://api8.siliconpin.com/files?filter[id][_in]=' + attIDs)
+                            .then(resp => resp.json())
+                                .then(file => {
+                                    this.files = file.data
+                                    
+                                })
+                        })
+            })
+            .catch((error) => {
+                console.log(error)
+                });
+    }
+}
+</script>

src/components/NoticePage.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="container bg-white mx-auto mt-3  p-4 text-blue-700 leading-loose">
+        <h2 class="text-3xl font-bold italic text-center text-black pb-4 underline decoration-blue-600 ">All Notice</h2>
+        <div v-if="isLoading" class="">
+            <div class="bg-gray-200 h-screen border-2 border-gray-300 shadow-2xl rounded-md opacity-500"></div>
+        </div>
+        <div v-else class=" flex flex-col border-2 border-gray-300 px-4 rounded-lg shadow-2xl">
+            <div  v-for="(item, index) in page" >
+                <a :href="'/notice/'+item.slug"> <h3> {{item.title}}</h3> </a>
+
+           
+                
+
+            </div>
+            <!-- <div v-html="page[0].content" class="container mx-auto">
+    
+            </div> -->
+        </div>
+    </div>
+    </template>
+    
+    <script>
+    export default {
+        data() {
+            return {
+                page: null,
+                isLoading: true
+            }
+        },
+        mounted: function () {
+            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
+            // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
+                .then(response => response.json())
+                .then(data => {
+              this.page = data.data.reverse()
+            //   console.log(data)
+              this.isLoading = false
+            })
+        }
+    }
+    </script>

src/components/NoticeSlug.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="container bg-white mx-auto mt-3  p-4">
+        <div v-if="isLoading">
+            <h2>Loading ...</h2>
+        </div>
+        <div v-else>
+            <h2>{{page[0].title}}</h2>
+            <div v-html="page[0].content" ></div>
+            <div v-if="fileAttached">
+                <h2>Attachments.</h2>
+                <ul>
+                    <li v-for="(file, index) in files">
+                        {{index+1}}. 
+                        <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">
+                          {{ file.filename_download }}
+                        </a>
+                    </li>
+
+                </ul>
+
+            </div>
+        </div>
+    </div>
+</template>
+    
+<script>
+export default {
+    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)
+        .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            throw new Error('Something went wrong');
+            })
+            .then(jsonPageData => {
+                this.page = jsonPageData.data
+                console.log(this.page)
+                this.isLoading = false
+                return jsonPageData.data[0].id
+                }
+            )
+            .then((pageID) => {
+                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
+                .then(resp => resp.json())
+                    .then(file => {
+                            let attIDs = ''
+                            let t = 0
+                            file.data.forEach(ids => {
+                                if (t == 0) attIDs = ids.directus_files_id
+                                else attIDs = attIDs + ',' + ids.directus_files_id
+                                t++
+                            });
+                            if(t>0) this.fileAttached=true
+                        return attIDs
+                    })
+                        .then((attIDs) => {
+                            fetch('https://api8.siliconpin.com/files?filter[id][_in]=' + attIDs)
+                            .then(resp => resp.json())
+                                .then(file => {
+                                    this.files = file.data
+                                })
+                        })
+            })
+            .catch((error) => {
+                console.log(error)
+                });
+    },
+    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>

src/components/RoutePage.vue

@@ -0,0 +1,90 @@
+<template>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <div class="container mx-auto px-4 text-justify mt-16">
+        <div v-if="isLoading" class="">
+            <div class="bg-gray-200 h-screen border-2 border-gray-300 shadow-2xl rounded-md opacity-500"></div>
+        </div>
+            <div v-else class="">
+                <div v-if="content" class="w-full flex flex-col justify-center place-items-center">
+                    <h2 class="text-2xl text-center pb-4  font-bold">{{ page.title }}</h2>
+                    <div class=" border-2 border-gray-300 shadow-2xl rounded-md opacity-500 p-4 w-full">
+                        <div class="flex flex-col place-items-center" v-html="content"></div>
+                    </div>
+                </div>
+
+                <div class="pt-2 flex flex-col justify-center place-items-center " v-if="fileAttached">
+                    <h2>{{ page.title }}</h2>
+                    <div v-for="file in files" :key="file.id">
+                        
+                        <iframe :src="`https://api8.siliconpin.com/assets/` + file.id" class="w-fit sm:w-[400px] md:w-[700px] lg:w-[900px] h-[200px] md:h-[600px] rounded-t-xl shadow-2xl"></iframe>
+                        <!-- <a class="text-blue-600" :href="`https://api8.siliconpin.com/assets/` + file.id+'?download' "  :download="file.filename_download">{{ file.filename_download }}</a> -->
+                        <!-- <a class="" :href="'https://api8.siliconpin.com/assets/' + file"></a> -->
+                    </div>
+                </div>
+            </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            page: null,
+            attachment:null,
+            content:null,
+            isLoading: true,
+            files: null,
+            fileAttached:false
+        }
+    },
+    mounted: function () {
+        let path=window.location.pathname.split('/');
+        let slug=path[1]
+        // console.log(path[1]);
+        if(path[1]==='notice' || path[1]==='documents'){
+            slug =path[2]
+        }
+            let queryP='https://api8.siliconpin.com/items/scc22?filter[slug][_eq]='+slug;
+            fetch(queryP)
+            .then(response => response.json())
+            .then(data => {
+            this.page = data.data[0]
+            this.content = this.page.content
+            this.file = this.page.attachments
+            //   console.log(this.file)
+            this.isLoading = false
+            return this.page.id
+            })
+            .then((pageID) => {
+                fetch('https://api8.siliconpin.com/items/scc22_files_1?filter[scc22_id][_in]=' + pageID)
+                .then(resp => resp.json())
+                    .then(file => {
+                        // console.log(file)
+                            let attIDs = ''
+                            let t = 0
+                            file.data.forEach(ids => {
+                                if (t == 0) attIDs = ids.directus_files_id
+                                else attIDs = attIDs + ',' + ids.directus_files_id
+                                t++
+                            });
+                            if(t>0) this.fileAttached=true
+                        return attIDs
+                    })
+                        .then((attIDs) => {
+                            fetch('https://api8.siliconpin.com/files?filter[id][_in]=' + attIDs)
+                            .then(resp => resp.json())
+                                .then(file => {
+                                    this.files = file.data
+                                    console.log(this.files)
+                                })
+                        })
+            })
+            .catch((error) => {
+                console.log(error)
+                });
+        
+    }
+}
+</script>
+<style>
+
+</style>

src/components/popUpWindow.vue

@@ -0,0 +1,86 @@
+<template>
+    <div>
+      <div v-for="item in fetchedData" :key="item.id" class="displayPosition mb-6">
+        <div :class="['flex', 'items-center', 'w-full', 'max-w-xs', 'p-4', 'mb-4', 'text-gray-500', 'bg-white', 'rounded-lg', 'shadow', 'dark:text-gray-400', 'dark:bg-gray-800', { 'hidden': !item.isVisible }]" :id="`toast-${item.id}`" role="alert">
+          <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-700 bg-blue-100 rounded-full dark:bg-green-800 dark:text-blue-700">
+            <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="blinking-icon">
+              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g id="SVGRepo_iconCarrier">
+                <path d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#1d4ed8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+              </g>
+            </svg>
+          </div>
+          <div class="ml-3 text-sm font-normal blinking-icon"><a target="_blank" :href="'/notice/'+item.slug" class="font-bold">{{ item.title }}</a></div>
+          <button @click="toggleDisplay(item)" type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" :data-dismiss-target="`#toast-${item.id}`" aria-label="Close">
+            <span class="sr-only">Close</span>
+            <!-- Your close button icon here -->  
+            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+</template>
+<script>
+  import Cookies from 'js-cookie';
+  
+  export default {
+    data() {
+      return {
+        fetchedData: [],
+      };
+    },
+    methods: {
+      toggleDisplay(item) {
+        item.isVisible = !item.isVisible;
+        // Store the visibility state in a cookie
+        Cookies.set(`toast-${item.id}-visible`, item.isVisible ? '1' : '0');
+      },
+      fetchData() {
+        fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&filter[position][_eq]=popup')
+          .then((response) => response.json())
+          .then((data) => {
+            this.fetchedData = data.data.reverse().map((item) => ({
+              ...item,
+              isVisible: Cookies.get(`toast-${item.id}-visible`) === '1' || !Cookies.get(`toast-${item.id}-visible`) ? true : false,
+            }));
+            this.isLoading = false;
+          });
+      },
+    },
+    mounted() {
+      this.fetchData();
+    },
+  };
+</script>
+  
+  <style>
+  .displayPosition {
+    position: fixed;
+    top: 50%;
+  }
+  @keyframes blink {
+    0% {
+      color: #1d4ed8;
+    }
+    25% {
+      color: #FF0000;
+    }
+    50% {
+      color: #1d4ed8;
+    }
+    100% {
+      color: #FF0000;
+    }
+  }
+  .blinking-icon {
+    animation: blink 2s infinite;
+    font-weight: bold;
+  }
+  .hidden {
+    display: none;
+  }
+  </style>
+  

src/layouts/Layout.astro

@@ -4,6 +4,9 @@ export interface Props {
 }
 
 const { title } = Astro.props;
+import PopUpWindow from '../components/popUpWindow.vue';
+import MainMenu from "../components/MainMenu.astro"
+import Footer from '../components/Footer.astro';
 ---
 
 <!DOCTYPE html>
@@ -11,19 +14,30 @@ const { title } = Astro.props;
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
-		<meta name="generator" content={Astro.generator} />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="generator" content="silicon web generator" />
 		<title>{title}</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 		<script src="/js/inc.js" defer></script>
+		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9252259454702469" crossorigin="anonymous"></script>
 
-	</head>
+	</head> 
 	<body>
-		<slot />
+		<div>
+			<PopUpWindow client:visible />
+			<MainMenu />
+			<slot />
+			<Footer />
+		</div>
 	</body>
 </html>
 <style is:global>
+	@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&display=swap');
+	body{
+		font-family: Quicksand;
+	}
 	/* :root {
 		--accent: 124, 58, 237;
 		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);

src/pages/404.astro

@@ -0,0 +1,104 @@
+---
+import Layout from "../layouts/Layout.astro"
+import RoutePage from "../components/RoutePage.vue"
+import Footer from "../components/Footer.astro"
+console.log(Astro.url.pathname)
+---
+<Layout title="">
+	<main>
+		<RoutePage client:visible/>
+		<!-- <section class="container-fluid">
+			<div class="flex justify-center">
+				<img src="/img/clg.jpg" alt="clg" class="mb-5 rounded-b-2xl" width="100%"height="100%"/>
+		  </div>
+		</section>
+		<div class="container mx-auto px-4">
+			
+			<div class="flex justify-center">
+				<div class="flex justify-center right-56 bg-blue-700 w-56 text-white p-1 text-xl rounded-full">Vision of The College</div>
+			</div>
+			  <div class="flex-none mt-5 justify-center">
+				  <div class="flex h-8 border-b border-slate-200 ml-5 text-xl">Character Formation through Knowledge and Value-based Education for Transformation of the Society and the Nation</div>
+			  </div>
+			  <br />
+			  <div class="flex justify-center">
+				  <div
+					  class="flex justify-center right-56 bg-blue-700 w-56 text-white p-1 text-xl rounded-full mt-14"
+				  >Our Mission</div>
+			  </div>
+			  <div class="flex-none justify-center p-5 text-xl text-justify">
+				  <div
+					  class="flex border-b border-slate-200"
+				  >a) To suit the above 'Vision', the 'Mission' of the College is to provide balanced, value based and knowledge based education informed by latest technology, with a view to instilling self-confidence among the students, in order to turn them into sensitive, dedicated and disciplined citizens who will display a high intellectual calibre, together with emotional balance and social commitment and particularly at helping the students with backward social and economic backgrounds living around the institution.</div>
+				  <div
+					  class="flex border-b border-slate-200 mt-3"
+				  >b) The college aims at moulding and shaping the students as good citizens with qualities of mind and heart showing commitment towards the nation as well as the community in which they live, extending the role of governance and leadership in discharging the different activities to its stakeholders and inculcating innovative practices. With such orientation students are expected to get involved in societal transformation.</div>
+				  <div
+					  class="flex border-b border-slate-200 mt-3"
+				  >c) Needless to say that since our College was established to serve the higher education needs of the hapless of youth, who had to bear the toll of Partition, we have always strove to spread education among this section of the society. Besides, we have to cater a huge number of students coming from the First Generation Literate families. Thus, our Vision and Mission does not come from any ivory tower but from the 'real' situation around us.</div>
+			  
+			  <div class="grid grid-cols-1 lg:grid-cols-2 bg-local md:gap-0 mt-4" style="background-image: url('/img/clg_grdnt.jpg')">
+				  <div class="grid place-items-center p-4">
+					<img src="/img/clgprin.jpg" alt="" class="w-full h-full rounded-md">
+				</div>
+				  <div class="grid text-white place-items-center text-justify p-6"> To suit the above 'Vision', the 'Mission' of the College is to provide balanced, value based and knowledge based education informed by latest technology, with a view to instilling self-confidence among the students, in order to turn them into sensitive, dedicated and disciplined citizens who will display a high intellectual calibre, together with emotional balance and social commitment and particularly at helping the students with backward social and economic backgrounds living around the institution.Needless to say that since our College was established to serve the higher education needs of the hapless of youth, who had to bear the toll of Partition, we have always strove to spread education among this section of the society. Besides, we have to cater a huge number of students coming from the First Generation Literate families. Thus, our Vision and Mission does not come from any ivory tower but from the 'real' situation around us. rer</div>
+			  </div>
+			  <div class="flex justify-center">
+					  <a href="/gallery"><button class="bg-blue-700 w-56 text-white p-1 mt-14 text-xl rounded-full">Gallery</button></a>
+				  </div>
+			  </div> -->
+			  <!-- <div
+				  class="grid grid-cols-12 bg-gradient-to-r from-stone-600 to-stone-800 h-56 content-center gap-5"
+			  >
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14 grid grid-rows-17">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Important Links</div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a
+							  href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne"
+						  >Gallery</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne">Notice</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a
+							  href="https://www.youtube.com/watch?v=BT4MQ2gA65Q&ab_channel=AllinOne"
+						  >Document</a>
+					  </div>
+				  </div>
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Related Sites</div>
+					  <div class="grid row-span-5 text-blue-600 pl-4 border-b border-black target-blank">
+						  <a href="https://www.wbsubregistration.org/">W.B.S.U.</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="https://www.ugc.ac.in/">U.G.C.</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a href="https://banglaruchchashiksha.wb.gov.in/">W.B.H.E.D.</a>
+					  </div>
+				  </div>
+				  <div class="grid col-span-4 bg-stone-800 rounded-md h-44 w-80 ml-14">
+					  <div
+						  class="grid row-span-5 text-white border-b border-white text-2xl content-center pl-4"
+					  >Document Links</div>
+					  <div class="grid row-span-5 text-blue-600 pl-4 border-b border-black">
+						  <a href="AQAR">AQAR</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4 border-b border-black">
+						  <a href="">R & D Cell</a>
+					  </div>
+					  <div class="grid row-span-4 text-blue-600 pl-4">
+						  <a href="">Academic Calendar</a>
+					  </div>
+				  </div>
+			  </div> -->
+		</div>
+	</main>
+</Layout>
+
+  

src/pages/contact-us.astro

@@ -0,0 +1,35 @@
+---
+import Layout from "../layouts/Layout.astro"
+---
+<Layout title="">
+    <main>
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 lg:grid-cols-2 mt-8">
+                <div class="flex flex-col h-fit justify-center place-items-center">
+                    <p class="text-center text-3xl text-blue-900 mt-4 font-semibold pt-10">Contact Us</p>
+                    <div class="flex flex-col place-items-center">
+                        <h1 class="text-center text-3xl text-blue-900 mt-4 font-semibold">Sree Chaitanya College,Habra </h1>
+                        <span class="text-2xl font-bold">(Arts and Science) </span>
+                        <h2 class="text-xl font-bold pt-2 text-center">Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B </h2>
+                        <p class="text-2xl pt-4">Call to: +913216237020</p>
+                        <p class="text-lg md:text-2xl text-center">Mail to: <a href="" class="text-blue-700 font-bold underline">sreechaitanyacollege@rediffmail.com</a></p>
+                    </div>
+                   
+                </div>
+                <div class="flex flex-col place-items-center justify-center">
+                    <p class="text-center text-3xl text-blue-900 font-semibold mt-4">View College on Google Map</p>
+                    <!-- Google Map Copied Code -->
+                    <iframe class="mt-4 mb-8" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3677.0775585659544!2d88.64048451555165!3d22.83661988504755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39f8b071c69b9933%3A0x5181c48a7b97726e!2sSree%20Chaitanya%20College%2C%20Habra!5e0!3m2!1sen!2sin!4v1667829054410!5m2!1sen!2sin"
+                            width="80%"
+                            height="400"
+                            frameborder="0"
+                            style="border:0;"
+                            
+                            aria-hidden="false"
+                            tabindex="0">
+                    </iframe>
+                </div>
+            </div>
+        </div>
+    </main>
+</Layout>

src/pages/documents/index.astro

@@ -0,0 +1,29 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import DocumentsPage from "../../components/DocumentsPage.vue"
+const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=documents&sort=-date_created');
+const data = await response.json();
+const notice = data.data;
+// console.log(data)
+---
+<Layout title="">
+    <DocumentsPage client:visible />
+    <!-- <main>
+        <div class="container mx-auto mt-3 p-4 ">
+            <div>
+                <h1 class="text-center text-4xl font-bold underline decoration-4 decoration-blue-700 py-10">Documents</h1>
+                <div class="text-blue-700 leading-loose">
+                    {
+                        notice.map(item =>
+                            <a href={'/documents/'+item.slug}>
+                                <h3>{item.title}</h3>
+                            </a>
+                        )
+                    }
+                </div>
+            </div>
+        </div>
+    </main> -->
+</Layout>
+
+   

src/pages/gallery.astro

@@ -0,0 +1,235 @@
+---
+import Layout from "../layouts/Layout.astro"
+---
+<Layout title="">
+    <main>
+        <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="">
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 place-items-center w-full">
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/1.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/2.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/3.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/4.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/5.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/6.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/7.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/8.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/9.jpg">
+                            </div>
+                        </div>
+    
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/11.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/12.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/13.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/14.jpg">
+                            </div>
+                        </div>
+    
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/15.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/16.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/17.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/18.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/19.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/20.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/21.jpeg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/22.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/23.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/24.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/25.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/26.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/27.jpg">
+                            </div>
+                        </div>
+    
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/28.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/29.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/30.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/31.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/32.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/32.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/33.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/34.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/35.jpg">
+                            </div>
+                        </div>
+                        <div class="flex flex-wrap h-full">
+                            <div class="w-full p-1 md:p-2">
+                                <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg hover:scale-150 duration-[2s] "
+                                    src="/img/36.jpg">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+</Layout>

src/pages/index.astro

@@ -1,90 +1,50 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from "../layouts/Layout.astro"
-import Card from '../components/Card.astro';
-import Modal from '../components/Modal.astro';
-import Header from '../components/Header.html';
-import MainHeader from '../components/MainHeader.vue';
-import Footer from '../components/Footer.astro';
 ---
-
+<Layout title="">
-<Layout title="Welcome to Astro.">
-	<Header />
-	<MainHeader />
 	<main>
-		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
+		<section class="container-fluid">
-		<p class="instructions">
+			<div class="flex justify-center">
-			To get started, open the directory <code>src/pages</code> in your project.<br />
+				<img src="/img/clg.jpg" alt="clg" class="mb-5 rounded-b-2xl" width="100%"height="100%"/>
-			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+		  </div>
-		</p>
+		</section>
-		<button id="myBtn">Open Modal</button>
+		<div class="container mx-auto px-4">
-		<Modal text=" This is a sample modal" /> 
+			
-		<ul role="list" class="link-card-grid">
+			<div class="flex justify-center">
-			<Card
+				<div class="flex justify-center right-56 bg-blue-700 w-56 text-white p-1 text-xl rounded-full">Vision of The College</div>
-				href="https://docs.astro.build/"
+			</div>
-				title="Documentation"
+			  <div class="flex-none mt-5 justify-center">
-				body="Learn how Astro works and explore the official API docs."
+				  <div class="flex h-8 border-b border-slate-200 ml-5 text-xl">Character Formation through Knowledge and Value-based Education for Transformation of the Society and the Nation</div>
-			/>
+			  </div>
-			<Card
+			  <br />
-				href="https://astro.build/integrations/"
+			  <div class="flex justify-center">
-				title="Integrations"
+				  <div
-				body="Supercharge your project with new frameworks and libraries."
+					  class="flex justify-center right-56 bg-blue-700 w-56 text-white p-1 text-xl rounded-full mt-14"
-			/>
+				  >Our Mission</div>
-			<Card
+			  </div>
-				href="https://astro.build/themes/"
+			  <div class="flex-none justify-center p-5 text-xl text-justify">
-				title="Themes"
+				  <div
-				body="Explore a galaxy of community-built starter themes."
+					  class="flex border-b border-slate-200"
-			/>
+				  >a) To suit the above 'Vision', the 'Mission' of the College is to provide balanced, value based and knowledge based education informed by latest technology, with a view to instilling self-confidence among the students, in order to turn them into sensitive, dedicated and disciplined citizens who will display a high intellectual calibre, together with emotional balance and social commitment and particularly at helping the students with backward social and economic backgrounds living around the institution.</div>
-			<Card
+				  <div
-				href="https://astro.build/chat/"
+					  class="flex border-b border-slate-200 mt-3"
-				title="Community"
+				  >b) The college aims at moulding and shaping the students as good citizens with qualities of mind and heart showing commitment towards the nation as well as the community in which they live, extending the role of governance and leadership in discharging the different activities to its stakeholders and inculcating innovative practices. With such orientation students are expected to get involved in societal transformation.</div>
-				body="Come say hi to our amazing Discord community. ❤️"
+				  <div
-			/>
+					  class="flex border-b border-slate-200 mt-3"
-		</ul>
+				  >c) Needless to say that since our College was established to serve the higher education needs of the hapless of youth, who had to bear the toll of Partition, we have always strove to spread education among this section of the society. Besides, we have to cater a huge number of students coming from the First Generation Literate families. Thus, our Vision and Mission does not come from any ivory tower but from the 'real' situation around us.</div>
+			  
+			  <div class="grid grid-cols-1 lg:grid-cols-2 bg-local md:gap-0 mt-4" style="background-image: url('/img/clg_grdnt.jpg')">
+				  <div class="grid place-items-center p-4">
+					<img src="/img/clgprin.jpg" alt="" class="w-full h-full rounded-md">
+				</div>
+				  <div class="grid text-white place-items-center text-justify p-6"> To suit the above 'Vision', the 'Mission' of the College is to provide balanced, value based and knowledge based education informed by latest technology, with a view to instilling self-confidence among the students, in order to turn them into sensitive, dedicated and disciplined citizens who will display a high intellectual calibre, together with emotional balance and social commitment and particularly at helping the students with backward social and economic backgrounds living around the institution.Needless to say that since our College was established to serve the higher education needs of the hapless of youth, who had to bear the toll of Partition, we have always strove to spread education among this section of the society. Besides, we have to cater a huge number of students coming from the First Generation Literate families. Thus, our Vision and Mission does not come from any ivory tower but from the 'real' situation around us. rer</div>
+			  </div>
+			  <div class="flex justify-center">
+					  <a href="/gallery"><button class="bg-blue-700 w-56 text-white p-1 mt-14 text-xl rounded-full">Gallery</button></a>
+				  </div>
+			  </div>
+		</div>
 	</main>
-	<Footer />
 </Layout>
 
-<style>
+  
-	main {
-		margin: auto;
-		padding: 1.5rem;
-		max-width: 60ch;
-	}
-	h1 {
-		font-size: 3rem;
-		font-weight: 800;
-		margin: 0;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		line-height: 1.6;
-		margin: 1rem 0;
-		border: 1px solid rgba(var(--accent), 25%);
-		background-color: white;
-		padding: 1rem;
-		border-radius: 0.4rem;
-	}
-	.instructions code {
-		font-size: 0.875em;
-		font-weight: bold;
-		background: rgba(var(--accent), 12%);
-		color: rgb(var(--accent));
-		border-radius: 4px;
-		padding: 0.3em 0.45em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent));
-	}
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 1rem;
-		padding: 0;
-	}
-</style>

src/pages/learn.astro

@@ -0,0 +1,149 @@
+<body  class="container mx-auto px-4">
+    <main onclick="bodyColor()" >
+        <a href="youtube.com">Youtube</a>
+        <div>
+            <button class="bg-blue-700 text-white" onclick="myfunction()">Click Me</button>
+            <p id="demo"></p>
+            <p id="demo2" onclick="myfunction2()">Click me</p>
+            <!-- <p id="demo3" onclick="myfunction3()">Click</p> -->
+            <button onclick="myfunction3()">Click Me</button>
+            <p id="demo3"></p>
+            <p id="color" onclick="changeColor()">Click To change Color</p>
+           
+            <input oncut="textCopied()" type="text" value="Try cut me" class="border">
+            <p id="copy"></p>
+            <label for="">Enter name</label>
+            <input type="text" id="fname" onblur="onBlur()" class="border" />
+        </div>
+
+        <select name="" id="mySelect" onchange="nameChange()">
+            <option value="Select" selected>-Select-</option>
+            <option value="Kumra">Kumra</option>
+            <option value="Habra">Habra</option>
+            <option value="Barasat">Barasat</option>
+            <option value="Kolkata">Kolkata</option>
+            <option value="North 24 parganas">North 24 parganas</option>
+            <option value="West Bengal">West Bengal</option>
+        </select>
+        <p id="name"></p>
+        <button onclick="fullScreen()" class="bg-green-800 text-white font-bold px-6 py-2 rounded-lg">Open Full Screen</button>
+        <button onclick="closeScreen()" class="bg-red-800 text-white px-6 py-2 font-bold rounded-lg" >Close Full Screen</button>
+
+ 
+
+    </main>
+</body>
+
+<script is:inline>
+    let a = null;
+    let b = 345;
+    let c = true;
+    // let d = BigInt("BifInt")
+    let e = "JavaScript";
+    let f = Symbol("I am a symbol");
+    let g = undefined;
+    // console.log(a, b, c, e, f, g)
+    var x = 20;
+    // a = "suvo";
+    // a = "java";
+    // console.log(typeof x)
+
+
+
+
+    let data =[10, 22, 37, 48, 88, 92, 99, 100];
+    let evenArray=[];
+    for(let i=0;i<data.length;i++) {
+        if (data[i]%2==0){
+            evenArray.push(data[i])
+        }
+        
+    }
+    for (let i=0;i<evenArray.length;i++) {
+        evenArray[i]=evenArray[i]*2
+    }
+    // console.log(evenArray)
+
+
+
+    var elem = document.documentElement;
+
+    function fullScreen() {
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+        }
+        else if (elem.mozRequestFullScreen) {
+            elem.mozRequestFullScreen();
+        }
+        else if (elem.webkitRequestFullScreen) {
+            elem.webkitRequestFullScreen();
+        }
+        else if (elem.msRequestFullScreen) {
+            elem = window.top.document.body;
+            elem.msRequestFullScreen();
+        }
+    }
+
+    function closeScreen(){
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        }
+        else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        }
+        else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+        else if (document.msExitFullscreen) {
+            window.top.document.msExitFullscreen
+        }
+    }
+    var output = document.getElementById("myP");
+    document.addEventListener("fullscreenchange", function() {
+        output.innerHTML = "fullscreenchange event fired!";
+    });
+    document.addEventListener("mozfullscreenchange", function() {
+        output.innerHTML = "mozfullscreenchange event fired!";
+    });
+    document.addEventListener("webkitfullscreenchange", function() {
+        output.innerHTML = "webkitfullscreenchange event fired!";
+    });
+    document.addEventListener("msfullscreenchange", function() {
+        output.innerHTML = "msfullscreenchange event fired!";
+    });
+function nameChange() {
+    var s = document.getElementById("mySelect").value;
+    document.getElementById("name").innerHTML = "You Selected: " + s;
+}
+
+    // function unload() {
+    //     return "Write Something Here......!";
+    // }
+
+    function myfunction() {
+        document.getElementById("demo").innerHTML="A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs.";
+    }
+    function myfunction2() {
+        document.getElementById("demo2").innerHTML = "YOU CLICKED ME!";
+    }
+    function myfunction3() {
+        document.getElementById("demo3").innerHTML= "You Clicked Me";
+    }
+    function changeColor() {
+        document.getElementById("color").style.background = "red"; 
+        document.getElementById("color").style.color = "yellow"
+    }
+    function bodyColor() {
+        document.getElementsByTagName("main")[0].style.background = "yellow"
+        document.getElementsByTagName("main")[0].style.color = "#7c4c23"
+        document.getElementsByTagName("main")[0].style.fontWeight = "1000"
+    }
+    function textCopied() {
+        document.getElementById("copy").innerHTML = "You Copied Me";
+    }
+
+    function onBlur() {
+        let x = document.getElementById("fname");
+        x.value = x.value.toUpperCase();
+    }
+</script>

src/pages/notice.astro

@@ -1,5 +0,0 @@
----
-import Notice from '../components/Notice.vue';
----
-
-<Notice  client:idle />

src/pages/notice/index.astro

@@ -0,0 +1,32 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import NoticePage from "../../components/NoticePage.vue"
+// const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice&sort=-date_created');
+// const data = await response.json();
+// const notice = data.data;
+// console.log(data)
+---
+<Layout title="">
+    <main>
+        <div>
+        </div>
+    </main>
+    <NoticePage client:visible />
+    <!-- <main>
+        <div class="container mx-auto mt-3 p-4 ">
+            <div>
+                <h1 class="text-center text-4xl font-bold underline decoration-4 decoration-blue-700 py-10">Notice</h1>
+                <div class="text-blue-700 leading-loose">
+                    {
+                        notice.map(item =>
+                            <a href={'/notice/'+item.slug}>
+                                <h3>{item.title}</h3>
+                            </a>
+                        )
+                    }
+                </div>
+            </div>
+        </div>
+    </main> -->
+</Layout>
+

src/pages/video.astro

@@ -1,23 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import MainHeader from '../components/MainHeader.vue';
-import VideoYt from '../components/VideoYt.html';
-
-import Footer from '../components/Footer.astro';
----
-
-<Layout title="Welcome to Astro.">
-	<MainHeader />
-	<main>
-		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
-		<p class="instructions">
-			To get started, open the directory <code>src/pages</code> in your project.<br />
-			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-		</p>
-    <VideoYt  client:idle />
-	</main>
-	<Footer />
-</Layout>
-
-<style>
-</style>