init
commit
5b47244ee9
|
|
@ -0,0 +1,20 @@
|
|||
# build output
|
||||
dist/
|
||||
.output/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
# Welcome to [Astro](https://astro.build)
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/basics)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Card.astro
|
||||
│ ├── layouts/
|
||||
│ │ └── Layout.astro
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :--------------------- | :------------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` |
|
||||
| `npm run astro --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
|
||||
// https://astro.build/config
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
|
||||
// https://astro.build/config
|
||||
import vue from "@astrojs/vue";
|
||||
|
||||
// https://astro.build/config
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [tailwind(), vue()]
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "sreechaitanyacollege.in",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev --host --port 2009",
|
||||
"start": "astro dev --host --port 2009",
|
||||
"build": "astro build",
|
||||
"push": "rsync -azP dist/ clients@ns1.cicdhosting.com:/home/clients/web/p46.cicdhosting.com/public_html/",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/tailwind": "^2.1.3",
|
||||
"@astrojs/vue": "^1.2.2",
|
||||
"astro": "^1.7.2",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"vue": "^3.2.45"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.57.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 873 B |
|
|
@ -0,0 +1,16 @@
|
|||
document.addEventListener("click", e => {
|
||||
const isDropdownButton = e.target.matches("[data-dropdown-button]")
|
||||
if (!isDropdownButton && e.target.closest("[data-dropdown]") != null) return
|
||||
|
||||
let currentDropdown
|
||||
if (isDropdownButton) {
|
||||
currentDropdown = e.target.closest("[data-dropdown]")
|
||||
currentDropdown.classList.toggle("active")
|
||||
}
|
||||
|
||||
document.querySelectorAll("[data-dropdown].active").forEach(dropdown => {
|
||||
if (dropdown === currentDropdown) return
|
||||
dropdown.classList.remove("active")
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
const { title, date } = Astro.props;
|
||||
---
|
||||
<div>
|
||||
<h1>{title}</h1>
|
||||
<p>{date}</p>
|
||||
<hr>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 0.15rem;
|
||||
background-color: white;
|
||||
background-image: var(--accent-gradient);
|
||||
background-size: 400%;
|
||||
border-radius: 0.5rem;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: 1rem 1.3rem;
|
||||
border-radius: 0.35rem;
|
||||
color: #111;
|
||||
background-color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
color: #444;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<footer>
|
||||
<div>
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-3 bg-stone-600 "
|
||||
>
|
||||
<div class="bg-stone-800 rounded-md h-44 m-6 text-gray-100 text-left text-xl p-3">Important Links<hr class="blue-400">
|
||||
<div class="grid grid-rows-3 text-blue-600 p-3 gap-4">
|
||||
<router-link to="/gallery">Gallery <hr class="border-slate-900"></router-link>
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<div class="header" id="nav">
|
||||
<div class="dropdown" data-dropdown>
|
||||
<button class="link" data-dropdown-button>Information</button>
|
||||
<div class="dropdown-menu information-grid">
|
||||
<div>
|
||||
<div class="dropdown-heading">Free Tutorials</div>
|
||||
<div class="dropdown-links">
|
||||
<a href="#" class="link">All</a>
|
||||
<a href="#" class="link">Latest</a>
|
||||
<a href="#" class="link">Popular</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown-heading">Courses</div>
|
||||
<div class="dropdown-links">
|
||||
<a href="#" class="link">JavaScript</a>
|
||||
<a href="#" class="link">CSS</a>
|
||||
<a href="#" class="link">React</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown-heading">Blog</div>
|
||||
<div class="dropdown-links">
|
||||
<a href="#" class="link">All</a>
|
||||
<a href="#" class="link">Latest</a>
|
||||
<a href="#" class="link">Popular</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="dropdown-heading">Other</div>
|
||||
<div class="dropdown-links">
|
||||
<a href="#" class="link">Twitter</a>
|
||||
<a href="#" class="link">Newsletter</a>
|
||||
<a href="#" class="link">Discord</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="link">Pricing</a>
|
||||
<div class="dropdown" data-dropdown>
|
||||
<button class="link" data-dropdown-button>Login</button>
|
||||
<div class="dropdown-menu">
|
||||
<form class="login-form">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" name="email" id="email">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" id="password">
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.header {
|
||||
background-color: #F3F3F3;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
padding: .5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.link {
|
||||
background: none;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
color: #777;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown.active > .link,
|
||||
.link:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
z-index: 99999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(100% + .25rem);
|
||||
background-color: white;
|
||||
padding: .75rem;
|
||||
border-radius: .25rem;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(-10px);
|
||||
transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
|
||||
}
|
||||
|
||||
.dropdown.active > .link + .dropdown-menu {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.information-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.dropdown-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .25rem;
|
||||
}
|
||||
|
||||
.login-form > input {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<header>
|
||||
<nav class="bg-gray-800">
|
||||
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div class="relative flex h-16 items-center justify-between">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
||||
<!-- Mobile menu button-->
|
||||
<button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!--
|
||||
Icon when menu is closed.
|
||||
|
||||
Heroicon name: outline/bars-3
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
<!--
|
||||
Icon when menu is open.
|
||||
|
||||
Heroicon name: outline/x-mark
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<!-- <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg> -->
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
|
||||
<div class="flex flex-shrink-0 items-center">
|
||||
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
||||
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:block">
|
||||
<div class="flex space-x-4">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
|
||||
<button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
|
||||
<span class="sr-only">View notifications</span>
|
||||
<!-- Heroicon name: outline/bell -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div class="relative ml-3">
|
||||
<div>
|
||||
<button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Dropdown menu, show/hide based on menu state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
|
||||
<!-- Active: "bg-gray-100", Not Active: "" -->
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
|
||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu, show/hide based on menu state. -->
|
||||
<!-- <div class="sm:hidden" id="mobile-menu">
|
||||
<div class="space-y-1 px-2 pt-2 pb-3">
|
||||
<a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
|
||||
|
||||
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
</template>
|
||||
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
---
|
||||
const { text} = Astro.props;
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Sit on top */
|
||||
padding-top: 100px; /* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="myModal" class="modal">
|
||||
|
||||
<!-- Modal content -->
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script is:inline>
|
||||
var modal = document.getElementById("myModal");
|
||||
|
||||
// Get the button that opens the modal
|
||||
var btn = document.getElementById("myBtn");
|
||||
|
||||
// Get the <span> element that closes the modal
|
||||
var span = document.getElementsByClassName("close")[0];
|
||||
|
||||
// When the user clicks the button, open the modal
|
||||
btn.onclick = function() {
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
// When the user clicks on <span> (x), close the modal
|
||||
span.onclick = function() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// When the user clicks anywhere outside of the modal, close it
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div class="container bg-white mx-auto mt-3 p-0 text-blue-700 leading-loose">
|
||||
<div v-if="isLoading">
|
||||
<h2>Loading ...</h2>
|
||||
</div>
|
||||
<div v-else>
|
||||
<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
|
||||
// console.log(data)
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<div>
|
||||
<div id="yt">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.onload = (event) => {
|
||||
// console.log("page is fully loaded");
|
||||
fetch('https://curriculum-app-api.beanstalkedu.com/items/theme_youtube_videos')
|
||||
.then(resp => resp.json())
|
||||
.then(videos => {
|
||||
// this.videos=videos.data
|
||||
const ytDiv = document.createElement("div");
|
||||
let yt =``
|
||||
|
||||
// console.log(videos.data)
|
||||
videos.data.forEach(element => {
|
||||
// console.log(element)
|
||||
yt =yt+`<iframe width="340"
|
||||
src="https://www.youtube.com/embed/`+element.youtube_id+`">
|
||||
</iframe>`
|
||||
// console.log(element.youtube_id)
|
||||
});
|
||||
ytDiv.innerHTML = yt
|
||||
document.getElementById("yt").appendChild(ytDiv);
|
||||
})
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style >
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="astro/client" />
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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} />
|
||||
<title>{title}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="/js/inc.js" defer></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
/* :root {
|
||||
--accent: 124, 58, 237;
|
||||
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
|
||||
}
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
code {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
} */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
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="Welcome to Astro.">
|
||||
<Header />
|
||||
<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>
|
||||
<button id="myBtn">Open Modal</button>
|
||||
<Modal text=" This is a sample modal" />
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community. ❤️"
|
||||
/>
|
||||
</ul>
|
||||
</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>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
---
|
||||
// Component Imports
|
||||
// import Tour from '../components/Tour.astro';
|
||||
import Modal from '../components/Modal.astro';
|
||||
// You can import components from any supported Framework here!
|
||||
|
||||
|
||||
// Component Script:
|
||||
// You can write any JavaScript/TypeScript that you'd like here.
|
||||
// It will run during the build, but never in the browser.
|
||||
// All variables are available to use in the HTML template below.
|
||||
let title = 'My Astro Site';
|
||||
|
||||
// Full Astro Component Syntax:
|
||||
// https://docs.astro.build/core-concepts/astro-components/
|
||||
---
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>{title}</title>
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="/style/global.css">
|
||||
<link rel="stylesheet" href="/style/home.css">
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
max-width: min(100%, 68ch);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<header>
|
||||
<div>
|
||||
<img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
|
||||
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Modal id="dialog" open="Open modal">
|
||||
<main slot="main">
|
||||
<p>Some extra content you would like here</p>
|
||||
<hr />
|
||||
<img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
|
||||
</main>
|
||||
<button slot="close">Close modal</button>
|
||||
</Modal>
|
||||
|
||||
<!-- <Tour /> -->
|
||||
|
||||
<!--
|
||||
- You can also use imported framework components directly in your markup!
|
||||
-
|
||||
- Note: by default, these components are NOT interactive on the client.
|
||||
- The `:visible` directive tells Astro to make it interactive.
|
||||
-
|
||||
- See https://docs.astro.build/core-concepts/component-hydration/
|
||||
-->
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
import Notice from '../components/Notice.vue';
|
||||
---
|
||||
|
||||
<Notice client:idle />
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
import Notice from '../../components/Astro-props.astro';
|
||||
---
|
||||
<Notice title="My First Post" date="09 Aug 2022" />
|
||||
<Notice title="My First Post" date="10 Aug 2022" />
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!-- Simple pop-up dialog box, containing a form -->
|
||||
<dialog id="favDialog">
|
||||
<form method="dialog">
|
||||
<section>
|
||||
<p>
|
||||
<label for="favAnimal">Favorite animal:</label>
|
||||
<select id="favAnimal" name="favAnimal">
|
||||
<option></option>
|
||||
<option>Brine shrimp</option>
|
||||
<option>Red panda</option>
|
||||
<option>Spider monkey</option>
|
||||
</select>
|
||||
</p>
|
||||
</section>
|
||||
<menu>
|
||||
<button id="cancel" type="button">Cancel</button>
|
||||
<button type="submit">Confirm</button>
|
||||
</menu>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<menu>
|
||||
<button id="updateDetails">Update details</button>
|
||||
</menu>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const updateButton = document.getElementById("updateDetails");
|
||||
const cancelButton = document.getElementById("cancel");
|
||||
const dialog = document.getElementById("favDialog");
|
||||
dialog.returnValue = "favAnimal";
|
||||
|
||||
function openCheck(dialog) {
|
||||
if (dialog.open) {
|
||||
console.log("Dialog open");
|
||||
} else {
|
||||
console.log("Dialog closed");
|
||||
}
|
||||
}
|
||||
|
||||
// Update button opens a modal dialog
|
||||
updateButton.addEventListener("click", () => {
|
||||
dialog.showModal();
|
||||
openCheck(dialog);
|
||||
});
|
||||
|
||||
// Form cancel button closes the dialog box
|
||||
cancelButton.addEventListener("click", () => {
|
||||
dialog.close("animalNotChosen");
|
||||
openCheck(dialog);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
|
||||
<style>
|
||||
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Sit on top */
|
||||
padding-top: 100px; /* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
color: #aaaaaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<h2>Modal Example</h2>
|
||||
|
||||
<!-- Trigger/Open The Modal -->
|
||||
<button id="myBtn">Open Modal</button>
|
||||
|
||||
<!-- The Modal -->
|
||||
<div id="myModal" class="modal">
|
||||
|
||||
<!-- Modal content -->
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<p>Some text in the Modal..</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Get the modal
|
||||
var modal = document.getElementById("myModal");
|
||||
|
||||
// Get the button that opens the modal
|
||||
var btn = document.getElementById("myBtn");
|
||||
|
||||
// Get the <span> element that closes the modal
|
||||
var span = document.getElementsByClassName("close")[0];
|
||||
|
||||
// When the user clicks the button, open the modal
|
||||
btn.onclick = function() {
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
// When the user clicks on <span> (x), close the modal
|
||||
span.onclick = function() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// When the user clicks anywhere outside of the modal, close it
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
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>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "preserve"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue