Initial commit
This commit is contained in:
commit
ec263707c7
80 changed files with 9928 additions and 0 deletions
12
src/components/Input/Input.tsx
Normal file
12
src/components/Input/Input.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import Input from '../../../fwt/components/Input'
|
||||
import { createSignal } from 'solid-js'
|
||||
|
||||
const [sample, setSample] = createSignal('')
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
<Input onChange={(val) => setSample(val)}></Input>
|
||||
</>
|
||||
)
|
||||
}
|
||||
13
src/layouts/Layout.astro
Normal file
13
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
const { title } = Astro.props
|
||||
|
||||
const websiteName = 'OCBO e-Sign'
|
||||
const websiteDescription = 'Digital Signature added for OCBO (Office of the City Building Official)'
|
||||
|
||||
import { Background, HTML } from '../../fwt'
|
||||
---
|
||||
|
||||
<HTML title={title} name={websiteName} description={websiteDescription} font="roboto" author="Patrick Alvin Alcala">
|
||||
<Background color="#16212c" />
|
||||
<slot />
|
||||
</HTML>
|
||||
59
src/pages/index.astro
Normal file
59
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import { Button, Logo, Box, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../fwt/'
|
||||
|
||||
// const sample = import.meta.env.SAMPLE
|
||||
---
|
||||
|
||||
<Layout title="OCBO e-Sign">
|
||||
<Page alignment="column">
|
||||
<Padding left={4.75} right={4.75}>
|
||||
<Display desktop tablet>
|
||||
<Row content="split">
|
||||
<Row content="left" gap={2}>
|
||||
<Logo size={140} />
|
||||
<h1>OCBO e-Sign</h1>
|
||||
</Row>
|
||||
|
||||
<Row content="left" gap={1}>
|
||||
<Button label="Login" edges="curved" to="/login" />
|
||||
<Button label="Register" edges="curved" to="/register" />
|
||||
</Row>
|
||||
</Row>
|
||||
</Display>
|
||||
|
||||
<Display mobile>
|
||||
<Column content="center">
|
||||
<Logo size={120} />
|
||||
<h1>OCBO e-Sign</h1>
|
||||
|
||||
<Button label="Register" edges="curved" to="/main" />
|
||||
</Column>
|
||||
</Display>
|
||||
|
||||
<Row content="spaced">
|
||||
<Box thickness={1} curved>
|
||||
<h2>Assessor</h2>
|
||||
</Box>
|
||||
<Box thickness={1} curved>
|
||||
<h2>Approver</h2>
|
||||
</Box>
|
||||
</Row>
|
||||
</Padding>
|
||||
</Page>
|
||||
</Layout>
|
||||
|
||||
<style lang="sass">
|
||||
@use '/src/styles/variables.sass' as vars
|
||||
@use '/src/styles/breakpoint.sass' as views
|
||||
|
||||
h1
|
||||
font-size: 3.25rem
|
||||
color: vars.$textColor
|
||||
|
||||
@media only screen and (max-width: views.$mobile)
|
||||
font-size: 2.25rem
|
||||
|
||||
.div
|
||||
width: 8rem
|
||||
</style>
|
||||
67
src/pages/login.astro
Normal file
67
src/pages/login.astro
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../fwt/'
|
||||
import { RiArrowsArrowGoBackLine } from 'solid-icons/ri'
|
||||
---
|
||||
|
||||
<Layout title="Dashboard - OCBO e-Sign">
|
||||
<Page alignment="column">
|
||||
<Padding left={4.75} right={4.75}>
|
||||
<Row content="split">
|
||||
<Display desktop tablet>
|
||||
<Row content="left" gap={2}>
|
||||
<Logo size={140} />
|
||||
<h1>OCBO e-Sign</h1>
|
||||
</Row>
|
||||
</Display>
|
||||
|
||||
<Link to="/">
|
||||
<Row content="left" gap={1}>
|
||||
<span class="name">Go Back</span>
|
||||
<RiArrowsArrowGoBackLine size={25} />
|
||||
</Row>
|
||||
</Link>
|
||||
</Row>
|
||||
</Padding>
|
||||
</Page>
|
||||
</Layout>
|
||||
|
||||
<style lang="sass">
|
||||
@use '/src/styles/variables.sass' as vars
|
||||
@use 'sass:color'
|
||||
|
||||
.padding
|
||||
margin: 11rem
|
||||
border: 1px solid red
|
||||
|
||||
h1
|
||||
font-size: 3.25rem
|
||||
color: vars.$textColor
|
||||
|
||||
.div
|
||||
width: 8rem
|
||||
|
||||
.name
|
||||
font-size: 1.25rem
|
||||
|
||||
.table
|
||||
width: 100%
|
||||
border-collapse: collapse
|
||||
margin: 2rem
|
||||
|
||||
th, td
|
||||
border: 1px solid vars.$tableBorderColor
|
||||
padding: 0.75rem
|
||||
text-align: left
|
||||
font-size: 1.1rem
|
||||
|
||||
td:nth-child(1)
|
||||
width: 12rem
|
||||
|
||||
td:nth-child(3)
|
||||
width: 9rem
|
||||
|
||||
th
|
||||
background-color: vars.$tableHeaderBackground
|
||||
color: white
|
||||
</style>
|
||||
118
src/pages/main.astro
Normal file
118
src/pages/main.astro
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding, Modal } from '../../fwt/'
|
||||
import { FiLogOut } from 'solid-icons/fi'
|
||||
---
|
||||
|
||||
<script>
|
||||
import gsap from 'gsap'
|
||||
const modal = document.getElementById('modal')
|
||||
const modalButton = document.getElementById('modal-button')
|
||||
|
||||
modalButton?.addEventListener('click', () => {
|
||||
gsap.to(modal, {
|
||||
duration: 0,
|
||||
display: 'block',
|
||||
ease: 'power2.out',
|
||||
})
|
||||
})
|
||||
|
||||
modal?.addEventListener('click', () => {
|
||||
gsap.to(modal, {
|
||||
duration: 0,
|
||||
display: 'none',
|
||||
ease: 'power2.out',
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<Layout title="Dashboard - OCBO e-Sign">
|
||||
<Page alignment="column">
|
||||
<Padding left={4.75} right={4.75}>
|
||||
<Row content="split">
|
||||
<Display desktop tablet>
|
||||
<Row content="left" gap={2}>
|
||||
<Logo size={140} />
|
||||
<h1>OCBO e-Sign</h1>
|
||||
</Row>
|
||||
</Display>
|
||||
|
||||
<Row content="left" gap={1}>
|
||||
<span class="name">Patrick Alvin Alcala</span>
|
||||
<Link to="/"><FiLogOut size={25} /></Link>
|
||||
</Row>
|
||||
</Row>
|
||||
|
||||
<Row content="center">
|
||||
<h2>List of Ready to Approve and Sign OP (Order of Payments)</h2>
|
||||
</Row>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Application Number</th>
|
||||
<th>Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>25-000011</td>
|
||||
<td>Some Name</td>
|
||||
<td id="modal-button"><Button label="Show Details" design="bu-ghost" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25-000012</td>
|
||||
<td>Another Name</td>
|
||||
<td><Button label="Show Details" design="bu-ghost" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Padding>
|
||||
</Page>
|
||||
|
||||
<div id="modal" style="display: none">
|
||||
<Modal background="rgba(0,0,0,0.5)">
|
||||
<h1>SAMPLE</h1>
|
||||
</Modal>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style lang="sass">
|
||||
@use '/src/styles/variables.sass' as vars
|
||||
@use 'sass:color'
|
||||
|
||||
.padding
|
||||
margin: 11rem
|
||||
border: 1px solid red
|
||||
|
||||
h1
|
||||
font-size: 3.25rem
|
||||
color: vars.$textColor
|
||||
|
||||
.div
|
||||
width: 8rem
|
||||
|
||||
.name
|
||||
font-size: 1.25rem
|
||||
|
||||
.table
|
||||
width: 100%
|
||||
border-collapse: collapse
|
||||
margin: 2rem
|
||||
|
||||
th, td
|
||||
border: 1px solid vars.$tableBorderColor
|
||||
padding: 0.75rem
|
||||
text-align: left
|
||||
font-size: 1.1rem
|
||||
|
||||
td:nth-child(1)
|
||||
width: 12rem
|
||||
|
||||
td:nth-child(3)
|
||||
width: 9rem
|
||||
|
||||
th
|
||||
background-color: vars.$tableHeaderBackground
|
||||
color: white
|
||||
</style>
|
||||
45
src/pages/register.astro
Normal file
45
src/pages/register.astro
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import { Button, Logo, Link, Page, Footer, Row, Column, Image, Copyright, OptimizeLogo, Display, Padding } from '../../fwt/'
|
||||
---
|
||||
|
||||
<Layout title="Register - OCBO e-Sign">
|
||||
<Page alignment="column">
|
||||
<Padding left={4.75} right={4.75}>
|
||||
<Display desktop tablet>
|
||||
<Row content="split">
|
||||
<Row content="left" gap={2}>
|
||||
<Logo size={140} />
|
||||
<h1>OCBO e-Sign</h1>
|
||||
</Row>
|
||||
|
||||
<Button label="Register" edges="curved" to="/main" />
|
||||
</Row>
|
||||
</Display>
|
||||
|
||||
<Display mobile>
|
||||
<Column content="center">
|
||||
<Logo size={120} />
|
||||
<h1>OCBO e-Sign</h1>
|
||||
|
||||
<Button label="Register" edges="curved" to="/main" />
|
||||
</Column>
|
||||
</Display>
|
||||
</Padding>
|
||||
</Page>
|
||||
</Layout>
|
||||
|
||||
<style lang="sass">
|
||||
@use '/src/styles/variables.sass' as vars
|
||||
@use '/src/styles/breakpoint.sass' as views
|
||||
|
||||
h1
|
||||
font-size: 3.25rem
|
||||
color: vars.$textColor
|
||||
|
||||
@media only screen and (max-width: views.$mobile)
|
||||
font-size: 2.25rem
|
||||
|
||||
.div
|
||||
width: 8rem
|
||||
</style>
|
||||
3
src/stores/sample.ts
Normal file
3
src/stores/sample.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
// import { atom } from 'nanostores'
|
||||
|
||||
// export const $sample = atom(0)
|
||||
51
src/styles/breakpoint.sass
Normal file
51
src/styles/breakpoint.sass
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
$mobile: 375px
|
||||
$tablet: 768px
|
||||
$desktop: 1440px
|
||||
|
||||
.on-desktop-only
|
||||
@media only screen and (min-width: 0px) and (max-width: $desktop)
|
||||
display: none
|
||||
|
||||
@media only screen and (min-width: $desktop)
|
||||
display: block
|
||||
|
||||
.on-tablet-only
|
||||
@media only screen and (min-width: 0px) and (max-width: $tablet)
|
||||
display: none
|
||||
|
||||
@media only screen and (min-width: $tablet) and (max-width: $desktop)
|
||||
display: block
|
||||
|
||||
@media only screen and (min-width: $desktop)
|
||||
display: none
|
||||
|
||||
.on-mobile-only
|
||||
@media only screen and (min-width: $mobile)
|
||||
display: block
|
||||
|
||||
@media only screen and (min-width: $tablet)
|
||||
display: none
|
||||
|
||||
.on-desktop-tablet-only
|
||||
@media only screen and (min-width: 0px) and (max-width: $tablet)
|
||||
display: none
|
||||
|
||||
@media only screen and (min-width: $tablet)
|
||||
display: block
|
||||
|
||||
.on-desktop-mobile-only
|
||||
@media only screen and (min-width: 0px) and (max-width: $mobile)
|
||||
display: block
|
||||
|
||||
@media only screen and (min-width: $mobile) and (max-width: $desktop)
|
||||
display: none
|
||||
|
||||
@media only screen and (min-width: $desktop)
|
||||
display: block
|
||||
|
||||
.on-tablet-mobile-only
|
||||
@media only screen and (min-width: 0px) and (max-width: $desktop)
|
||||
display: block
|
||||
|
||||
@media only screen and (min-width: $desktop)
|
||||
display: none
|
||||
9
src/styles/classes.sass
Normal file
9
src/styles/classes.sass
Normal 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
45
src/styles/fonts.sass
Normal 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
|
||||
19
src/styles/variables.sass
Normal file
19
src/styles/variables.sass
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@use 'sass:color'
|
||||
|
||||
$background: #16212c
|
||||
$textColor: #f0f8ff
|
||||
|
||||
$fontSize: 1rem
|
||||
|
||||
$borderMargin: 2rem
|
||||
|
||||
$primaryColor: #0075BB
|
||||
$secondaryColor: #57687F
|
||||
$accentColor: #00887C
|
||||
$infoColor: #0082A4
|
||||
$successColor: #009435
|
||||
$warningColor: #E5B400
|
||||
$errorColor: #E8595C
|
||||
|
||||
$tableBorderColor: color.adjust($background, $lightness: 5%)
|
||||
$tableHeaderBackground: color.adjust($background, $blackness: 5%)
|
||||
6
src/utils/db/supabase.js
Normal file
6
src/utils/db/supabase.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { createClient } from '@supabase/supabase-js'
|
||||
|
||||
const supabaseUrl = import.meta.env.SUPABASE_URL
|
||||
const supabaseKey = import.meta.env.SUPABASE_KEY
|
||||
|
||||
export const supabase = createClient(supabaseUrl, supabaseKey)
|
||||
Loading…
Add table
Add a link
Reference in a new issue