c

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,13 +12,16 @@
     "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"
+    "vue": "^3.2.45",
+    "vue-pdf-embed": "^1.1.6"
   },
   "devDependencies": {
     "sass": "^1.57.1"

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/Footer.astro

@@ -1,84 +1,10 @@
 ---
 import FooterComponent from "./FooterComponent.vue"
-// const notice = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice');
-// const noticeJson = await notice.json();
-// const noticeData = noticeJson.data.reverse();
-// console.log(noticeData)
 ---
-<!-- <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 Updates</span><span class="shape text-2xl font-bold p-1 rounded-full h-fit">*</span></p>
-            <div class="flex flex-col h-[250px] h-fit overflow-y-scroll w-full bg-blue-50 rounded-b-lg">
-                {
-                    noticeData.map((data : {title : string | undefined; slug : string | undefined} )=>
-                    <a 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="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 target="_blank" href="/gallery" class="px-6 text-xl text-blue-700 hover:underline">Gallery</a>
-                <a target="_blank" href="/notice" class="px-6 text-xl text-blue-700 hover:underline">Notice</a>
-                <a target="_blank" href="/documents" class="px-6 text-xl text-blue-700 hover:underline">Documents</a>
-                <a target="_blank" href="/documents/aqar" class="px-6 text-xl text-blue-700 hover:underline">AQAR</a>
-                <a target="_blank" href="/documents/iqac" class="px-6 text-xl text-blue-700 hover:underline">IQAC</a>
-                <a target="_blank" href="/documents/academic-calendar" class="px-6 text-xl text-blue-700 hover:underline">Academic Calendar</a>
-                <a target="_blank" href="https://www.wbsuexams.net" class="px-6 text-xl text-blue-700 hover:underline">West Bengal State University</a>
-                <a target="_blank" href="https://www.ugc.gov.in" class="px-6 text-xl text-blue-700 hover:underline">University Grants Commission</a>
-                <a target="_blank" href="https://banglaruchchashiksha.wb.gov.in/" class="px-6 text-xl text-blue-700 hover:underline">W.B.H.E.D</a>
-            </div>
-        </div>
-        
-    </div>
-</section> -->
+
 <section class="">
     <FooterComponent client:visible />
 </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> -->
 <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/FooterComponent.vue

@@ -1,65 +1,53 @@
 <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 Updates</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">
+        <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="bg-blue-700 text-white px-6 py-2 text-2xl font-bold underline decoration-4 decoration-[#7c4c23]">Important Links</p>
-            <!-- <p class="text-center text-xl py-4"><span class="shape px-2 text-blue-700 rounded-md">New</span> <a class="hover:underline" href="https://online.rgyci.org"></a></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>
-                <!-- <a target="_blank" href="/notice" class="px-6 text-xl text-blue-700 hover:underline">Notice</a>
-                <a target="_blank" href="/documents" class="px-6 text-xl text-blue-700 hover:underline">Documents</a>
-                <a target="_blank" href="/documents/aqar" class="px-6 text-xl text-blue-700 hover:underline">AQAR</a>
-                <a target="_blank" href="/documents/iqac" class="px-6 text-xl text-blue-700 hover:underline">IQAC</a>
-                <a target="_blank" href="/documents/academic-calendar" class="px-6 text-xl text-blue-700 hover:underline">Academic Calendar</a>
-                <a target="_blank" href="https://www.wbsuexams.net" class="px-6 text-xl text-blue-700 hover:underline">West Bengal State University</a>
-                <a target="_blank" href="https://www.ugc.gov.in" class="px-6 text-xl text-blue-700 hover:underline">University Grants Commission</a>
-                <a target="_blank" href="https://banglaruchchashiksha.wb.gov.in/" class="px-6 text-xl text-blue-700 hover:underline">W.B.H.E.D</a> -->
-            </div>
-            <!-- <a href="/important" 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>
-</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>
+                <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="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 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>
-        <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>
+    </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>
-</div>
 </template>
 <script>
 export default {

src/components/Header.astro

@@ -1,19 +0,0 @@
-<main>
-    <header>
-        <div class="lg:hidden grid grid-cols-6 bg-blue-700 place-items-center text-white">
-            <div class="grid col-span-1 "> <a href="/"><img class="w-16" src="/img/logo3.png" alt="Sree Chaitanya College,Habra "/></a> </div>
-            <div class="grid col-span-4 ">SREE CHAITANYA COLLEGE</div>
-            <!-- <div class="grid col-span-1 "><button class="hover:bg-white hover:text-blue-700 rounded-md p-1">Log In</button></div> -->
-        </div>
-        <div
-            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">
-            <a href="/"><img src="/img/logo3.png" alt="Sree Chaitanya College,Habra" class="absolute left-0 top-0 h-44 w-44 mt-2 ml-14 text-base "
-                /></a>
-            Estd.-1956
-            <br />Sree Chaitanya College,Habra
-            <br />(Arts and Science)
-            <br />Prafullanagar, Habra, 24Pgs(N) Pin-743268, W.B
-        </div>
-        <!-- <Menu /> -->
-    </header>
-</main>

src/components/MainMenu.astro

@@ -1,5 +1,26 @@
 
 <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">
  
@@ -21,15 +42,15 @@
    
       <!-- 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>|
+        <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
+          <a class="dropBtn" href="#">Administration 
             <i class="fas fa-angle-down"></i>
-          </a>|
+          </a>
           <div class="drop-content" >
             <a href="/governing-body">Governing Body</a>
             <a href="/composition-of-gb">Composition of GB</a>
@@ -40,9 +61,9 @@
         <!-- <a href="https://center.rgyci.org/center_list">Center List</a> -->
         <!-- Dropdown menu -->
         <div class="dropdown">
-          <a class="dropBtn" href="#">Academics
+          <a class="dropBtn" href="#">Academics 
             <i class="fas fa-angle-down"></i>
-          </a>|
+          </a>
           <div class="drop-content">
             <a href="/departments">Departments & Faculty</a>
             <a href="/admission">Admission</a>
@@ -58,12 +79,14 @@
           </div>
         </div>
         <div class="dropdown">
-          <a class="dropBtn" href="#">Organizations
+          <a class="dropBtn" href="#">Organizations 
             <i class="fas fa-angle-down"></i>
-          </a>|
+          </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>
@@ -73,9 +96,9 @@
           </div>
         </div>
         <div class="dropdown">
-          <a class="dropBtn" href="#">Facilities
+          <a class="dropBtn" href="#">Facilities 
             <i class="fas fa-angle-down"></i>
-          </a>|
+          </a>
           <div class="drop-content">
             <a href="/facilities">Facilities</a>
             <a href="/rti">RTI</a>           
@@ -116,10 +139,30 @@
 <script is:inline>
 </script>
 <style>
-  .drop-content {
-    color: black;
-    width: fit-content;
+  @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;
     }
@@ -128,12 +171,11 @@
   padding: 0;
   box-sizing: border-box;
 }
-body{
-  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
+/* body{
   background-image: url(background-img.jpg);
   background-size: cover;
   background-attachment: fixed;
-}
+} */
 .navbar{
   height: 70px;
   width: 100%;
@@ -165,7 +207,7 @@ body{
   border-radius: 5px;
   /* background-color: #0ea5e930; */
   width: 100%;
-  padding: 10px 4px;
+  padding: 12px 4px;
   width: fit-content;
   text-decoration: none;
   font-weight: 550;

src/components/NewTemp.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="app-header">
+      <template v-if="isLoading"> Loading... </template>
+  
+      <template v-else>
+        <span v-if="showAllPages"> {{ pageCount }} page(s) </span>
+  
+        <span v-else>
+          <button :disabled="page <= 1" @click="page--">❮</button>
+  
+          {{ page }} / {{ pageCount }}
+  
+          <button :disabled="page >= pageCount" @click="page++">❯</button>
+        </span>
+  
+        <label class="right">
+          <input v-model="showAllPages" type="checkbox" />
+  
+          Show all pages
+        </label>
+      </template>
+    </div>
+  
+    <div class="app-content">
+      <vue-pdf-embed
+        ref="pdfRef"
+        :source="pdfSource"
+        :page="page"
+        @password-requested="handlePasswordRequest"
+        @rendered="handleDocumentRender"
+      />
+    </div>
+  </template>
+  
+  <script>
+  import VuePdfEmbed from 'vue-pdf-embed'
+  
+  // OR THE FOLLOWING IMPORT FOR VUE 2
+  // import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'
+  
+  export default {
+    components: {
+      VuePdfEmbed
+    },
+    data() {
+      return {
+        isLoading: true,
+        page: null,
+        pageCount: 1,
+        pdfSource:
+          'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
+        showAllPages: true
+      }
+    },
+    watch: {
+      showAllPages() {
+        this.page = this.showAllPages ? null : 1
+      }
+    },
+    methods: {
+      handleDocumentRender(args) {
+        console.log(args)
+        this.isLoading = false
+        this.pageCount = this.$refs.pdfRef.pageCount
+      },
+      handlePasswordRequest(callback, retry) {
+        callback(prompt(retry ? 'Enter password again' : 'Enter password'))
+      }
+    }
+  }
+  </script>
+  

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

@@ -1,11 +1,10 @@
 <template>
     <div class="container bg-white mx-auto mt-3  p-4 text-blue-700 leading-loose">
-        <div v-if="isLoading">
-            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Loading ...</h2>
+        <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>
-            <h2 class="text-black text-4xl font-bold underline decoration-4 decoration-blue-700 text-center py-10">Notice</h2>
+        <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>
 
@@ -29,7 +28,7 @@
             }
         },
         mounted: function () {
-            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
+            fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1&filter[status][_eq]=published')
             // fetch('https://api8.siliconpin.com/items/scc22?slug=about-us')
                 .then(response => response.json())
                 .then(data => {

src/components/RoutePage.vue

@@ -1,35 +1,143 @@
 <template>
-    <div class="container mx-auto px-4 text-justify">
-        <div v-if="content">
-            <div v-html="content"></div>
+    <div class="container mx-auto px-4 text-justify my-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">{{ pageData.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-10 flex flex-col " v-if="fileAttached">
+                    <h2 class="">{{pageData.title}}</h2>
+                    <div class="app-header">
+                        <template v-if="isLoading"> Loading... </template>
+
+                        <template v-else>
+                        <span v-if="showAllPages"> {{ pageCount }} page(s) </span>
+
+                        <span v-else>
+                            <button :disabled="page <= 1" @click="page--">❮</button>
+
+                            {{ page }} / {{ pageCount }}
+
+                            <button :disabled="page >= pageCount" @click="page++">❯</button>
+                        </span>
+
+                        <label class="right">
+                            <input v-model="showAllPages" type="checkbox" />
+
+                            Show all pages
+                        </label>
+                        </template>
+                    </div>
+
+                    <div class="app-content">
+                        <vue-pdf-embed
+                        ref="pdfRef"
+                        :source="pdfSource"
+                        :page="page"
+                        @password-requested="handlePasswordRequest"
+                        @rendered="handleDocumentRender"
+                        />
+  
+                        <!-- <pdf class="" :src="`https://api8.siliconpin.com/assets/` + file.id"/> -->
+                        <!-- <iframe :src="`https://api8.siliconpin.com/assets/` + file.id" ></iframe> -->
+                        <!-- <iframe :src="`https://api8.siliconpin.com/assets/` + file.id" style="overflow:hidden; height:800px;width:100%" height="100%" width="100%"></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>
+import VuePdfEmbed from 'vue-pdf-embed'
+
 export default {
+    components: {
+        VuePdfEmbed
+    },
     data() {
         return {
+            pageCount: 1,
+            pdfSource: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
+            showAllPages: true,
+            pageData: null,
             page: null,
             attachment:null,
             content:null,
-            isLoading: true
+            isLoading: true,
+            files: null,
+            fileAttached:false
+        };
+    },  
+    watch: {
+        showAllPages() {
+        this.page = this.showAllPages ? null : 1
         }
     },
+    methods: {
+        handleDocumentRender(args) {
+        console.log(args)
+        this.isLoading = false
+        this.pageCount = this.$refs.pdfRef.pageCount
+        },
+        handlePasswordRequest(callback, retry) {
+        callback(prompt(retry ? 'Enter password again' : 'Enter password'))
+        }
+    }, 
     mounted: function () {
-        
         let path=window.location.pathname.split('/');
-        console.log(path[1]);
-
-        // fetch('https://api8.siliconpin.com/items/scc22?filter[type][_eq]=notice&limit=-1')
-        let queryP='https://api8.siliconpin.com/items/scc22?filter[slug][_eq]='+path[1];
-        fetch(queryP)
+        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
-        //   console.log(data)
-          this.isLoading = false
-        })
-    }
+            this.pageData = data.data[0]
+            this.content = this.page.content
+            this.file = this.page.attachments
+            //   console.log(this.file)
+            this.isLoading = false
+            return this.pageData.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>

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" />
-		<meta name="generator" content={Astro.generator} />
+		<!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
+		<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

@@ -1,15 +1,11 @@
 ---
 import Layout from "../layouts/Layout.astro"
 import RoutePage from "../components/RoutePage.vue"
-import Header from "../components/Header.astro"
-import MainMenu from "../components/MainMenu.astro"
 import Footer from "../components/Footer.astro"
 console.log(Astro.url.pathname)
 ---
 <Layout title="">
 	<main>
-		<Header />
-		<MainMenu />
 		<RoutePage client:visible/>
 		<!-- <section class="container-fluid">
 			<div class="flex justify-center">
@@ -103,7 +99,6 @@ console.log(Astro.url.pathname)
 			  </div> -->
 		</div>
 	</main>
-	<Footer />
 </Layout>
 
   

src/pages/contact-us.astro

@@ -1,12 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro"
-import Header from "../components/Header.astro"
-import MainMenu from "../components/MainMenu.astro"
-import Footer from "../components/Footer.astro"
 ---
 <Layout title="">
-    <Header />
-    <MainMenu />
     <main>
         <div class="container mx-auto px-4">
             <div class="grid grid-cols-1 lg:grid-cols-2 mt-8">
@@ -35,10 +30,6 @@ import Footer from "../components/Footer.astro"
                     </iframe>
                 </div>
             </div>
-           
-        
-            
         </div>
     </main>
-    <Footer />
 </Layout>

src/pages/documents/[id].astro

@@ -1,46 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro"
-import Header from "../../components/Header.astro"
-import MainMenu from "../../components/MainMenu.astro"
-import Footer from "../../components/Footer.astro"
-
-export async function getStaticPaths() {
-  const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=documents');
-  const data = await response.json();
-  const finalData = data.data.map((n: {slug: string | undefined;})=>{
-      return {params: {id:n.slug}}
-  }) 
-  return finalData;
-}
-
-const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=documents');
-const data = await response.json();
-const { id } = Astro.params;
-const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
----
-<Layout title="">
-    <Header />
-    <MainMenu />
-    <main>
-        <div class="container bg-white mx-auto mt-3  p-4">
-            <div v-if="isLoading">
-                <!-- <h2>Loading ...</h2> -->
-            </div>
-            <div>
-                <!-- <h2 class="text-center t-8">{data.data[idx].title}</h2> -->
-                <div></div>
-                <div >
-                    <!-- <h2>Attachments.</h2> -->
-                    <div>
-                        <div class="flex flex-col place-items-center justify-center" set:html={data.data[idx].content}></div>
-                        <a href=""></a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-    <Footer />
-</Layout>
-
-    
-   

src/pages/documents/index.astro

@@ -1,8 +1,5 @@
 ---
 import Layout from "../../layouts/Layout.astro"
-import Header from "../../components/Header.astro"
-import MainMenu from "../../components/MainMenu.astro"
-import Footer from "../../components/Footer.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();
@@ -10,8 +7,6 @@ const notice = data.data;
 // console.log(data)
 ---
 <Layout title="">
-    <Header />
-    <MainMenu  />
     <DocumentsPage client:visible />
     <!-- <main>
         <div class="container mx-auto mt-3 p-4 ">
@@ -29,7 +24,6 @@ const notice = data.data;
             </div>
         </div>
     </main> -->
-    <Footer />    
 </Layout>
 
    

src/pages/gallery.astro

@@ -1,12 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro"
-import Header from "../components/Header.astro"
-import MainMenu from "../components/MainMenu.astro"
-import Footer from "../components/Footer.astro"
 ---
 <Layout title="">
-    <Header />
-<MainMenu />
     <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>
@@ -237,5 +232,4 @@ import Footer from "../components/Footer.astro"
             </section>
         </div>
     </main>
-    <Footer />
 </Layout>

src/pages/index.astro

@@ -1,13 +1,10 @@
 ---
-import Layout from "../layouts/Layout.astro"
-import Header from "../components/Header.astro"
-import MainMenu from "../components/MainMenu.astro"
-import Footer from "../components/Footer.astro"
+import Layout from "../layouts/Layout.astro";
+import NewTemp from "../components/NewTemp.vue";
 ---
 <Layout title="">
+	<!-- <NewTemp client:visible /> -->
 	<main>
-		<Header />
-		<MainMenu />
 		<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%"/>
@@ -48,59 +45,8 @@ import Footer from "../components/Footer.astro"
 					  <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>
-	<Footer />
 </Layout>
 
   

src/pages/learn.astro

@@ -35,11 +35,34 @@
 </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)
 
 
 

src/pages/notice.astro

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

src/pages/notice/[id].astro

@@ -1,44 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro"
-import Header from "../../components/Header.astro"
-import MainMenu from "../../components/MainMenu.astro"
-import Footer from "../../components/Footer.astro"
-
-export async function getStaticPaths() {
-  const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice');
-  const data = await response.json();
-  const finalData = data.data.map((n: { slug: string | undefined; })=>{
-      return {params: {id:n.slug}}
-  }) 
-  return finalData;
-}
-
-const response = await fetch('https://api8.siliconpin.com/items/scc22?filter[status][_eq]=published&filter[type][_eq]=notice');
-const data = await response.json();
-const { id } = Astro.params;
-const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
----
-<Layout title="">
-    <Header />
-    <MainMenu />
-    <main>
-        <div class="container bg-white mx-auto mt-3  p-4">
-            <div>
-            </div>
-            <div>
-                <h2 class="text-center t-8">{data.data[idx].title}</h2>
-                <div></div>
-                <div >
-                    <div>
-                        <div class="flex flex-col place-items-center justify-center" set:html={data.data[idx].content}></div>
-                        <a href=""></a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-    <Footer />
-</Layout>
-
-    
-   

src/pages/notice/index.astro

@@ -1,8 +1,5 @@
 ---
 import Layout from "../../layouts/Layout.astro"
-import Header from "../../components/Header.astro"
-import MainMenu from "../../components/MainMenu.astro"
-import Footer from "../../components/Footer.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();
@@ -10,8 +7,6 @@ import NoticePage from "../../components/NoticePage.vue"
 // console.log(data)
 ---
 <Layout title="">
-    <Header />
-    <MainMenu />
     <NoticePage client:visible />
     <!-- <main>
         <div class="container mx-auto mt-3 p-4 ">
@@ -29,7 +24,5 @@ import NoticePage from "../../components/NoticePage.vue"
             </div>
         </div>
     </main> -->
-    <Footer />    
 </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>