Updated
This commit is contained in:
parent
6e8391f7d1
commit
97e29e8983
17 changed files with 99 additions and 157 deletions
|
|
@ -28,7 +28,7 @@ export default (props: Props) => {
|
|||
<meta name="author" content={props.author} />
|
||||
<meta property="og:description" content={props.description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<Show when={props.font}>
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
|
||||
</Show>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 73 KiB |
BIN
fwt/images/esign.avif
Normal file
BIN
fwt/images/esign.avif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
fwt/images/esign.webp
Normal file
BIN
fwt/images/esign.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
52
src/components/Card.astro
Normal file
52
src/components/Card.astro
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
import { Image, Column, Link } from '../../fwt'
|
||||
|
||||
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'
|
||||
$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
|
||||
</style>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.card
|
||||
// display: flex
|
||||
// flex-direction: column
|
||||
// align-items: flex-start
|
||||
// justify-content: flex-start
|
||||
border: 1px solid transparent
|
||||
border-radius: 20px
|
||||
padding: 2rem
|
||||
cursor: pointer
|
||||
width: 15rem
|
||||
|
||||
&:hover
|
||||
border: 1px solid white
|
||||
|
||||
&__name
|
||||
padding: 1rem 0 0 0
|
||||
font-size: 1rem
|
||||
font-weight: 500
|
||||
|
||||
&__description
|
||||
padding: 0.5rem 0 0 0
|
||||
font-size: 0.75rem
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import './Card.sass'
|
||||
import { Image, Column, Row } from '../../../fwt'
|
||||
|
||||
interface Props {
|
||||
avif: string
|
||||
webp: string
|
||||
name: string
|
||||
description: string
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<section class="card">
|
||||
<Column>
|
||||
<Image avif={props.avif} webp={props.webp} size={140} />
|
||||
<span class="card__name">{props.name}</span>
|
||||
<span class="card__description">{props.description}</span>
|
||||
</Column>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.counter
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
gap: 1rem
|
||||
margin: 2rem
|
||||
color: white
|
||||
border: 1px solid rgba(22, 34, 60, 0.5)
|
||||
padding: 1rem 2rem
|
||||
border-radius: 16px
|
||||
background: rgba(134, 152, 217, 0.1)
|
||||
|
||||
&__display
|
||||
font-size: 1.75rem
|
||||
font-weight: bold
|
||||
|
||||
&__buttons
|
||||
display: flex
|
||||
justify-content: center
|
||||
gap: 0.25rem
|
||||
|
||||
// &:hover
|
||||
// background: color.adjust(vars.$primaryColor, $blackness: 20%)
|
||||
|
||||
|
||||
&__decrement
|
||||
width: 2rem
|
||||
height: 2.25rem
|
||||
padding: auto
|
||||
font-size: 1rem
|
||||
font-weight: bold
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
background-color: rgba(86, 14, 14, 0.915)
|
||||
border-radius: 8px
|
||||
color: white
|
||||
border: 1px solid rgba(255,255,255,0.2)
|
||||
|
||||
&:active
|
||||
transform: scale(0.95)
|
||||
|
||||
&__increment
|
||||
@extend .counter__decrement
|
||||
background-color: rgb(14, 42, 86, 0.915)
|
||||
|
||||
&:active
|
||||
transform: scale(0.95)
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import './Counter.sass'
|
||||
import { createSignal } from 'solid-js'
|
||||
|
||||
let [count, setCount] = createSignal(0)
|
||||
|
||||
const increment = () => {
|
||||
setCount(count() + 1)
|
||||
}
|
||||
|
||||
const decrement = () => {
|
||||
setCount(count() - 1)
|
||||
}
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
<section class="counter">
|
||||
<div class="counter__display">{count()}</div>
|
||||
<div class="counter__buttons">
|
||||
<button class="counter__decrement" onClick={decrement}>
|
||||
-
|
||||
</button>
|
||||
<button class="counter__increment" onClick={increment}>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import Input from '../../../fwt/components/Input'
|
||||
import { createSignal } from 'solid-js'
|
||||
|
||||
const [sample, setSample] = createSignal('')
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
<Input onChange={(val) => setSample(val)}></Input>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -4,10 +4,11 @@ const { title } = Astro.props
|
|||
const websiteName = 'Template'
|
||||
const websiteDescription = 'This is just a template.'
|
||||
|
||||
import { Background, HTML } from '../../fwt'
|
||||
import { Background, HTML, OptimizeBackground } from '../../fwt'
|
||||
---
|
||||
|
||||
<HTML title={title} name={websiteName} description={websiteDescription} font="roboto" author="Patrick Alvin Alcala">
|
||||
<Background color="#0c1b31" />
|
||||
<!-- <OptimizeBackground /> -->
|
||||
<Background image />
|
||||
<slot />
|
||||
</HTML>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,49 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import { Button, Logo, Link, Page, Row, Image, Column } from '../../fwt/'
|
||||
import Card from '../components/Card/Card'
|
||||
import OLA from '../../fwt/images/ocbo-portal.avif'
|
||||
import OLW from '../../fwt/images/ocbo-portal.webp'
|
||||
import OcboLogoA from '../../fwt/images/ocbologo.avif'
|
||||
import OcboLogoW from '../../fwt/images/ocbologo.webp'
|
||||
import { Button, Logo, Link, Page, Row, Image, Column, OptimizeBackground } from '../../fwt/'
|
||||
// import Card from '../components/Card/Card'
|
||||
import Card from '../components/Card.astro'
|
||||
import portalA from '../../fwt/images/ocbo-portal.avif'
|
||||
import portalW from '../../fwt/images/ocbo-portal.webp'
|
||||
import esignA from '../../fwt/images/esign.avif'
|
||||
import esignW from '../../fwt/images/esign.webp'
|
||||
---
|
||||
|
||||
<Layout title="FWT">
|
||||
<Layout title="OCBO Portal">
|
||||
<!-- <OptimizeBackground /> -->
|
||||
<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>
|
||||
<Column>
|
||||
<Row content="center">
|
||||
<Image avif={OLA.src} webp={OLW.src} size={150} />
|
||||
<h1>OCBO Portal for Applications</h1>
|
||||
<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://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" />
|
||||
</Row>
|
||||
|
||||
<Card avif={OcboLogoA.src} webp={OcboLogoW.src} name="OCBO e-Sign" description="A secure way of signing permits." />
|
||||
</Column>
|
||||
</Page>
|
||||
|
||||
<style lang="sass">
|
||||
h1
|
||||
color: #3377AC
|
||||
margin: 0
|
||||
font-size: 3.25rem
|
||||
</style>
|
||||
</Layout>
|
||||
|
||||
<style lang="sass">
|
||||
$text-color: rbga(255, 255, 255, 0.8)
|
||||
|
||||
h1
|
||||
color: $text-color
|
||||
margin: -2rem 0 2.75rem 0
|
||||
font-size: 3.25rem
|
||||
|
||||
h3
|
||||
color: $text-color
|
||||
margin: 0.5rem 0 2rem 0
|
||||
|
||||
.logo-text
|
||||
color: $text-color
|
||||
font-size: 2rem
|
||||
font-weight: 600
|
||||
margin: -1.5rem 0 0 0
|
||||
opacity: 0.8
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
.fullscreen
|
||||
position: absolute
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100vw
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@use 'sass:color'
|
||||
|
||||
$background: #0c1b31
|
||||
$background: rgb(12, 26, 48)
|
||||
$textColor: #f0f8ff
|
||||
|
||||
$fontSize: 1rem
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue