PatAlcala9/ocbo-portal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
Patrick Alvin Alcala 2026-02-11 18:33:42 +08:00
commit 7628b18255
94 changed files with 6386 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/components/Card.astro Normal file
View file

@ -0,0 +1,64 @@
---
import { Image, Column, Link } from '../../@dasig'
interface Props {
avif: string
webp: string
name: string
description: string
site: string
}
const { avif, webp, name, description, site } = Astro.props
---
<section class="card">
<Link to={site} newtab>
<Column>
<Image avif={avif} webp={webp} size={140} />
<span class="card__name">{name}</span>
<span class="card__description">{description}</span>
</Column>
</Link>
</section>
<style lang="sass">
@use 'sass:color'
@use '../../configs/design/sizes.sass' as view
$background: rgba(12, 26, 48, 0.2)
.card
backdrop-filter: blur(6px) saturate(100%)
background-color: $background
border: 1px solid color.adjust($background, $lightness: 15%)
padding: 2.25rem
cursor: pointer
width: 14rem
height: 12rem
transition: all 0.2s ease-out
&:hover
background-color: rgba(12, 26, 48, 0.6)
transform: scale(1.10)
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
&__name
padding: 1rem 0 0 0
font-size: 1rem
font-weight: 500
&__description
padding: 0.5rem 0 0 0
font-size: 0.75rem
@media only screen and (min-width: 0px) and (max-width: view.$tablet)
background-color: color.adjust($background, $lightness: 15%)
border: 1px solid color.adjust($background, $lightness: 25%)
padding: 1.25rem
&:hover
background-color: color.adjust($background, $blackness: 35%)
border: 1px solid color.adjust($background, $blackness: 25%)
transform: scale(1.05)
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)
</style>

BIN
src/images/background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

BIN
src/images/esign.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
src/images/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
src/images/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/images/ocbo-portal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
src/images/ocbologo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
src/images/sample.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 47 KiB

14
src/layouts/Layout.astro Normal file
View file

@ -0,0 +1,14 @@
---
import { Background, HTML } from '../../@dasig'
interface Props {
title: string
}
const { title } = Astro.props
---
<HTML title={title} font="inter">
<Background image />
<slot />
</HTML>

70
src/pages/index.astro Normal file
View file

@ -0,0 +1,70 @@
---
import Layout from '../layouts/Layout.astro'
import { Footer, Page, Row, Image, Column, Display, Padding, Copyright } from '../../@dasig'
import Card from '../components/Card.astro'
import portalA from '../../@dasig/images/ocbo-portal.avif'
import portalW from '../../@dasig/images/ocbo-portal.webp'
import esignA from '../../@dasig/images/esign.avif'
import esignW from '../../@dasig/images/esign.webp'
import patA from '../../@dasig/images/pat-alcala.avif'
import patW from '../../@dasig/images/pat-alcala.webp'
---
<Layout title="OCBO Portal">
<Page alignment="column">
<Row gap={1} content="left"><Image avif={portalA.src} webp={portalW.src} size={90} /><span class="logo-text">OCBO Portal</span></Row>
<Column>
<Display desktop tablet>
<Row content="center">
<Column>
<h1>Welcome to OCBO Application Portal</h1>
</Column>
</Row>
<Row gap={2.5}>
<Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits" site="https://esign.patalcala.com" />
</Row>
</Display>
<Display mobile>
<Padding top={2} bottom={2} left={0} right={0}>
<Column gap={1.5}>
<Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits" site="https://esign.patalcala.com" />
</Column>
</Padding>
</Display>
</Column>
<Footer>
<Row content="left">
<Column gap={0.5} content="top">
<Copyright />
<Row gap={0.5}>
<span>Developed By: <Image avif={patA.src} webp={patW.src} size={80} alt="Pat Alcala logos" /> Pat Alcala</span>
</Row>
<span>Developed By: Pat Alcala</span>
</Column>
</Row>
</Footer>
<style lang="sass">
$text-color: rbga(255, 255, 255, 0.8)
h1
color: $text-color
margin: -2rem 0 2.75rem 0
font-size: 2.25rem
h3
color: $text-color
margin: 0.5rem 0 2rem 0
.logo-text
color: $text-color
font-size: 2rem
font-weight: 700
margin: -1.5rem 0 0 0
opacity: 0.9
</style>
</Page>
</Layout>

3
src/stores/sample.ts Normal file
View file

@ -0,0 +1,3 @@
// import { atom } from 'nanostores'
// export const $sample = atom(0)

49
src/styles/breakpoints.sass Normal file
View file

@ -0,0 +1,49 @@
@use '../../configs/design/sizes.sass' as sizes
.on-desktop-only
@media only screen and (min-width: 0px) and (max-width: sizes.$desktop)
display: none
@media only screen and (min-width: sizes.$desktop)
display: block
.on-tablet-only
@media only screen and (min-width: 0px) and (max-width: sizes.$tablet)
display: none
@media only screen and (min-width: sizes.$tablet) and (max-width: sizes.$desktop)
display: block
@media only screen and (min-width: sizes.$desktop)
display: none
.on-mobile-only
@media only screen and (min-width: sizes.$mobile)
display: block
@media only screen and (min-width: sizes.$tablet)
display: none
.on-desktop-tablet-only
@media only screen and (min-width: 0px) and (max-width: sizes.$tablet)
display: none
@media only screen and (min-width: sizes.$tablet)
display: block
.on-desktop-mobile-only
@media only screen and (min-width: 0px) and (max-width: sizes.$mobile)
display: block
@media only screen and (min-width: sizes.$mobile) and (max-width: sizes.$desktop)
display: none
@media only screen and (min-width: sizes.$desktop)
display: block
.on-tablet-mobile-only
@media only screen and (min-width: 0px) and (max-width: sizes.$desktop)
display: block
@media only screen and (min-width: sizes.$desktop)
display: none

9
src/styles/classes.sass Normal file
View file

@ -0,0 +1,9 @@
.fullscreen
position: absolute
top: 0
left: 0
width: 100vw
height: 100vh
object-fit: cover
z-index: -1
opacity: 1

45
src/styles/fonts.sass Normal file
View file

@ -0,0 +1,45 @@
$Roboto: Roboto, sans-serif
$Inter: Inter, sans-serif
$Montserrat: Montserrat, sans-serif
$OpenSans: 'Open Sans', sans-serif
$PublicSans: 'Public Sans', sans-serif
@font-face
font-family: 'Roboto'
font-style: normal
font-display: swap
font-weight: 100 900
src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
@font-face
font-family: 'Inter'
font-style: normal
font-display: swap
font-weight: 100 900
src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
@font-face
font-family: 'Montserrat'
font-style: normal
font-display: swap
font-weight: 100 900
src: url(https://cdn.jsdelivr.net/fontsource/fonts/montserrat:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
@font-face
font-family: 'Open Sans'
font-style: normal
font-display: swap
font-weight: 300 800
src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
@font-face
font-family: 'Public Sans'
font-style: normal
font-display: swap
font-weight: 100 900
src: url(https://cdn.jsdelivr.net/fontsource/fonts/public-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD