Initial commit
This commit is contained in:
commit
ec263707c7
80 changed files with 9928 additions and 0 deletions
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue