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

Updated

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-11-12 10:12:21 +08:00
parent 97e29e8983
commit 274f7aa44b
4 changed files with 39 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

4
astro.config.mjs
View file

@ -22,8 +22,8 @@ export default defineConfig({
}, },
}, },
build: { build: {
assets: '_fwt', assets: '_portal',
inlineStylesheets: 'never', inlineStylesheets: 'never',
}, },
site: 'http://localhost:8080', site: 'https://ocboportal.patalcala.com',
}) })

12
src/components/Card.astro
View file

@ -24,6 +24,7 @@ const { avif, webp, name, description, site } = Astro.props
<style lang="sass"> <style lang="sass">
@use 'sass:color' @use 'sass:color'
@use '/src/styles/breakpoint.sass' as view
$background: rgba(12, 26, 48, 0.2) $background: rgba(12, 26, 48, 0.2)
.card .card
@ -49,4 +50,15 @@ const { avif, webp, name, description, site } = Astro.props
&__description &__description
padding: 0.5rem 0 0 0 padding: 0.5rem 0 0 0
font-size: 0.75rem 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> </style>

3
src/layouts/Layout.astro
View file

@ -4,11 +4,10 @@ const { title } = Astro.props
const websiteName = 'Template' const websiteName = 'Template'
const websiteDescription = 'This is just a template.' const websiteDescription = 'This is just a template.'
import { Background, HTML, OptimizeBackground } from '../../fwt' import { Background, HTML } from '../../fwt'
--- ---
<HTML title={title} name={websiteName} description={websiteDescription} font="roboto" author="Patrick Alvin Alcala"> <HTML title={title} name={websiteName} description={websiteDescription} font="roboto" author="Patrick Alvin Alcala">
<!-- <OptimizeBackground /> -->
<Background image /> <Background image />
<slot /> <slot />
</HTML> </HTML>

36
src/pages/index.astro
View file

@ -1,6 +1,6 @@
--- ---
import Layout from '../layouts/Layout.astro' import Layout from '../layouts/Layout.astro'
import { Button, Logo, Link, Page, Row, Image, Column, OptimizeBackground } from '../../fwt/' import { Button, Logo, Link, Page, Row, Image, Column, Display, OptimizeBackground, Padding } from '../../fwt/'
// import Card from '../components/Card/Card' // import Card from '../components/Card/Card'
import Card from '../components/Card.astro' import Card from '../components/Card.astro'
import portalA from '../../fwt/images/ocbo-portal.avif' import portalA from '../../fwt/images/ocbo-portal.avif'
@ -14,16 +14,28 @@ import esignW from '../../fwt/images/esign.webp'
<Page alignment="column"> <Page alignment="column">
<Row content="left"><Row><Image avif={portalA.src} webp={portalW.src} size={90} /><span class="logo-text">OCBO Portal</span></Row></Row> <Row content="left"><Row><Image avif={portalA.src} webp={portalW.src} size={90} /><span class="logo-text">OCBO Portal</span></Row></Row>
<Column> <Column>
<Row content="center"> <Display desktop tablet>
<Column> <Row content="center">
<h1>Welcome to OCBO Application Portal</h1> <Column>
</Column> <h1>Welcome to OCBO Application Portal</h1>
</Row> </Column>
<Row gap={2.5}> </Row>
<Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits." site="https://ocboapps.davaocity.gov.ph" />
<Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits." site="https://ocboapps.davaocity.gov.ph" /> <Row gap={2.5}>
<Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits." site="https://ocboapps.davaocity.gov.ph" /> <Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits." site="https://ocboapps.davaocity.gov.ph" />
</Row> <Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits." site="https://ocboapps.davaocity.gov.ph" />
<Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits." site="https://ocboapps.davaocity.gov.ph" />
</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://ocboapps.davaocity.gov.ph" />
<Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits." site="https://ocboapps.davaocity.gov.ph" />
<Card avif={esignA.src} webp={esignW.src} name="OCBO e-Sign" description="A secure way of signing permits." site="https://ocboapps.davaocity.gov.ph" />
</Column>
</Padding>
</Display>
</Column> </Column>
</Page> </Page>
</Layout> </Layout>
@ -34,7 +46,7 @@ import esignW from '../../fwt/images/esign.webp'
h1 h1
color: $text-color color: $text-color
margin: -2rem 0 2.75rem 0 margin: -2rem 0 2.75rem 0
font-size: 3.25rem font-size: 3rem
h3 h3
color: $text-color color: $text-color