Initial commit

.dockerignore

@@ -0,0 +1,6 @@
+node_modules/
+.git
+.gitignore
+*.log
+dist
+Dockerfile

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

.gitignore

@@ -0,0 +1,37 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.local
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# Backend
+backend/target/
+
+# Custom
+src/assets/

.prettierrc.yml

@@ -0,0 +1,6 @@
+semi: false
+singleQuote: true
+trailingComma: 'es5'
+bracketSpacing: true
+printWidth: 500
+proseWrap: 'preserve'

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN corepack enable
+RUN pnpm install
+COPY . .
+RUN pnpm build
+
+FROM nginx:alpine AS runtime
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 8080

README.md

@@ -0,0 +1 @@
+# ocbo-esign

astro.config.mjs

@@ -0,0 +1,29 @@
+// @ts-check
+import { defineConfig } from 'astro/config'
+import solidJs from '@astrojs/solid-js'
+import compressor from 'astro-compressor'
+import robotsTxt from '@itsmatteomanf/astro-robots-txt'
+import purgecss from 'astro-purgecss'
+
+export default defineConfig({
+  prefetch: true,
+  integrations: [
+    solidJs(),
+    compressor({ gzip: false, brotli: true }),
+    robotsTxt(),
+    purgecss({
+      fontFace: true,
+      variables: true,
+    }),
+  ],
+  vite: {
+    css: {
+      transformer: 'lightningcss',
+    },
+  },
+  build: {
+    assets: '_fwt',
+    inlineStylesheets: 'never',
+  },
+  site: 'http://localhost:4321',
+})

backend/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "backend"
+version = "0.1.0"
+edition = "2024"
+
+[dependencies]
+actix-cors = "0.7.1"
+actix-governor = "0.8.0"
+actix-web = "4.11.0"
+dotenvy = "0.15.7"
+mysql = "26.0.1"
+serde = { version = "1.0.219", features = ["derive"] }
+sqlx = { version = "0.8.6", features = ["mysql", "macros", "runtime-tokio-rustls"] }

backend/src/api.rs

@@ -0,0 +1,43 @@
+use actix_web::{HttpResponse, Responder, get, web::Data};
+use serde::Serialize;
+use sqlx::FromRow;
+
+use crate::AppState;
+
+#[derive(Serialize, FromRow)]
+struct Employee {
+    employeeid: i32,
+    employeename: String,
+    uname: String,
+    pword: String,
+    password: String,
+    ref_positionid: i32,
+    ref_designationid: i32,
+    is_approver: i32,
+    is_finalapprover: i32,
+    is_assessment: i32,
+    is_reviewer: i32,
+    is_evaluator: i32,
+    is_inspector: i32,
+    is_delete: i32,
+    imagepath: String,
+    sigimage: String,
+    is_supervisor: i32,
+    is_guest: i32,
+    is_online: i32,
+    is_head: i32,
+    is_reset: i32
+}
+
+#[get("/employee")]
+pub async fn sample(app_state: Data<AppState>) -> impl Responder {
+    let query =
+        sqlx::query_as::<_, Employee>("SELECT * FROM employee")
+            .fetch_all(&app_state.pool)
+            .await;
+
+    match query {
+        Ok(result) => HttpResponse::Ok().json(result),
+        Err(_) => HttpResponse::BadRequest().into(),
+    }
+}

backend/src/main.rs

@@ -0,0 +1,50 @@
+use actix_web::{App, http, HttpServer, web::Data};
+// use actix_cors::Cors;
+use actix_governor::{Governor, GovernorConfigBuilder};
+use dotenvy::dotenv;
+
+use sqlx::mysql::{MySqlPool, MySqlPoolOptions};
+use std::env;
+
+mod api;
+use api::{sample};
+
+#[derive(Clone, Debug)]
+pub struct AppState {
+    pool: MySqlPool,
+}
+
+#[actix_web::main]
+async fn main() -> std::io::Result<()> {
+    dotenv().ok();
+    let db_connection = env::var("DATABASE_URL").unwrap();
+    let pool: MySqlPool = MySqlPoolOptions::new()
+        .connect(db_connection.as_str())
+        .await
+        .unwrap();
+    let app_state = AppState { pool };
+
+    HttpServer::new(move || {
+      // let cors = Cors::default()
+      //   .allowed_origin("localhost:*")
+      //   .allowed_methods(vec!["GET", "POST"])
+      //   .allowed_headers(vec![http::header::AUTHORIZATION, http::header::ACCEPT])
+      //   .allowed_header(http::header::CONTENT_TYPE)
+      //   .max_age(3600);
+
+      let governor_conf = GovernorConfigBuilder::default()
+        .seconds_per_request(2)
+        .burst_size(20)
+        .finish()
+        .unwrap();
+
+      App::new()
+          .app_data(Data::new(app_state.pool.clone()))
+          // .wrap(cors)
+          .wrap(Governor::new(&governor_conf))
+          .service(sample)
+    })
+    .bind(("127.0.0.1", 4320))?
+    .run()
+    .await
+}

docker-compose.yml

@@ -0,0 +1,9 @@
+services:
+  template:
+    container_name: template
+    restart: unless-stopped
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - 8080:8080

fwt/Optimizers/OptimizeBackground.tsx

@@ -0,0 +1,17 @@
+import sharp from 'sharp'
+
+const convertBackground = async () => {
+  const inputSrc = 'src/assets/images/background.png'
+  const webpOutput = 'fwt/images/background.webp'
+  const avifOutput = 'fwt/images/background.avif'
+
+  const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(1920).toBuffer()
+  await sharp(avifBuffer).toFile(avifOutput)
+
+  const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(1920).toBuffer()
+  await sharp(webpBuffer).toFile(webpOutput)
+}
+
+export default () => {
+  convertBackground()
+}

fwt/Optimizers/OptimizeImage.tsx

@@ -0,0 +1,21 @@
+import sharp from 'sharp'
+
+interface Props {
+  src: string
+  size?: number
+}
+
+const convertImage = async (props: Props) => {
+  const avifOutputPath = `fwt/images/${props.src.split('.').slice(0, -1).join('.')}.avif`
+  const webpOutputPath = `fwt/images/${props.src.split('.').slice(0, -1).join('.')}.webp`
+
+  const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
+  await sharp(avifBuffer).toFile(avifOutputPath)
+
+  const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
+  await sharp(webpBuffer).toFile(webpOutputPath)
+}
+
+export default (props: Props) => {
+  convertImage(props)
+}

fwt/Optimizers/OptimizeLogo.tsx

@@ -0,0 +1,34 @@
+import sharp from 'sharp'
+
+interface Props {
+  size?: number
+  favicon?: boolean
+}
+
+const convertLogo = async (props: Props) => {
+  const inputSrc = 'src/assets/images/logo.png'
+  const webpImage = 'fwt/images/logo.webp'
+  const avifImage = 'fwt/images/logo.avif'
+
+  const avifBuffer = await sharp(inputSrc).avif({ quality: 60 }).resize(props.size).toBuffer()
+  await sharp(avifBuffer).toFile(avifImage)
+
+  const webpBuffer = await sharp(inputSrc).webp({ quality: 75 }).resize(props.size).toBuffer()
+  await sharp(webpBuffer).toFile(webpImage)
+}
+
+const generateFavicon = async (props: Props) => {
+  const inputSrc = 'src/assets/images/logo.png'
+  const favicon = 'public/favicon.png'
+
+  const faviconBuffer = await sharp(inputSrc).png({ quality: 90 }).resize(50).toBuffer()
+  await sharp(faviconBuffer).toFile(favicon)
+}
+
+export default (props: Props) => {
+  convertLogo(props)
+
+  if (props.favicon) {
+    generateFavicon(props)
+  }
+}

fwt/components/Background.tsx

@@ -0,0 +1,50 @@
+import '../styles/Background.sass'
+import { Show, createSignal } from 'solid-js'
+import fs from 'fs'
+import webpPath from '../images/background.webp'
+import avifPath from '../images/background.avif'
+import noBackground from '../images/no-background.webp'
+
+interface Props {
+  image?: boolean
+  color?: string
+}
+
+let [imageLoaded, setImageLoaded] = createSignal(false)
+
+const checkBackground = () => {
+  if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
+    setImageLoaded(true)
+  } else {
+    setImageLoaded(false)
+  }
+}
+
+export default (props: Props) => {
+  checkBackground()
+
+  return (
+    <>
+      <Show when={props.image}>
+        <Show when={imageLoaded()}>
+          <picture class="fullscreen">
+            <source srcset={avifPath.src} type="image/avif" />
+            <source srcset={webpPath.src} type="image/webp" />
+            <source srcset={noBackground.src} type="image/webp" />
+            <img width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
+          </picture>
+        </Show>
+        <Show when={!imageLoaded()}>
+          <picture class="fullscreen">
+            <source srcset={noBackground.src} type="image/webp" />
+            <img width="1920" height="auto" decoding="async" loading="lazy" alt="An alternative background if found no image background" />
+          </picture>
+        </Show>
+      </Show>
+
+      <Show when={!props.image}>
+        <div style={{ background: props.color }} class="fullscreen" />
+      </Show>
+    </>
+  )
+}

fwt/components/Box.tsx

@@ -0,0 +1,19 @@
+import '../styles/Box.sass'
+import { type JSXElement, createMemo } from 'solid-js'
+
+interface Props {
+  thickness: number
+  color?: string
+  children: JSXElement
+  curved?: boolean
+}
+
+export default (props: Props) => {
+  const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
+
+  return (
+    <section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
+      {props.children}
+    </section>
+  )
+}

fwt/components/Button.tsx

@@ -0,0 +1,83 @@
+import '../styles/Button.sass'
+import { Show, Switch, Match } from 'solid-js'
+
+interface Props {
+  label?: string
+  to?: string
+  onClick?: () => void
+  edges?: 'curved' | 'rounded' | 'flat'
+  design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
+  submit?: boolean
+  newtab?: boolean
+}
+
+const getBorderRadius = (edge: Props['edges']) => {
+  switch (edge) {
+    case 'curved':
+      return 'border-radius: 6px'
+    case 'rounded':
+      return 'border-radius: 32px'
+    case 'flat':
+      return 'border-radius: 0'
+    default:
+      return 'border-radius: 0'
+  }
+}
+
+export default (props: Props) => {
+  const borderRadius = getBorderRadius(props.edges)
+
+  return (
+    <>
+      <Show when={props.to}>
+        <Switch>
+          <Match when={props.design}>
+            <a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
+              <button class={props.design} style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </a>
+          </Match>
+          <Match when={!props.design}>
+            <a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
+              <button class="button" style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </a>
+          </Match>
+        </Switch>
+      </Show>
+
+      <Show when={!props.to}>
+        <Switch>
+          <Match when={props.design}>
+            <Show when={props.submit}>
+              <button class={props.design} type="submit" style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+
+            <Show when={!props.submit}>
+              <button class={props.design} onClick={props.onClick} style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+          </Match>
+          <Match when={!props.design}>
+            <Show when={props.submit}>
+              <button class="button" type="submit" style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+
+            <Show when={!props.submit}>
+              <button class="button" onClick={props.onClick} style={borderRadius}>
+                {props.label || 'Click Me!'}
+              </button>
+            </Show>
+          </Match>
+        </Switch>
+      </Show>
+    </>
+  )
+}

fwt/components/Column.tsx

@@ -0,0 +1,18 @@
+import '../styles/Column.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+        {props.children}
+      </section>
+    </>
+  )
+}

fwt/components/Copyright.tsx

@@ -0,0 +1,14 @@
+interface Props {
+  year: string
+  name: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <span>
+        Copyright © {props.year} {props.name} All Rights Reserved.
+      </span>
+    </>
+  )
+}

fwt/components/Display.tsx

@@ -0,0 +1,41 @@
+import '../styles/Viewport.sass'
+import { type JSXElement, Switch, Match } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  desktop?: boolean
+  tablet?: boolean
+  mobile?: boolean
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Switch>
+        <Match when={props.desktop && !props.tablet && !props.mobile}>
+          <div class="on-desktop-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && !props.mobile}>
+          <div class="on-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && !props.tablet && props.mobile}>
+          <div class="on-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && props.tablet && !props.mobile}>
+          <div class="on-desktop-tablet-only">{props.children}</div>
+        </Match>
+
+        <Match when={props.desktop && !props.tablet && props.mobile}>
+          <div class="on-desktop-mobile-only">{props.children}</div>
+        </Match>
+
+        <Match when={!props.desktop && props.tablet && props.mobile}>
+          <div class="on-tablet-mobile-only">{props.children}</div>
+        </Match>
+      </Switch>
+    </>
+  )
+}

fwt/components/Footer.tsx

@@ -0,0 +1,16 @@
+import '../styles/Footer.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <footer class="footer">
+        <small>{props.children}</small>
+      </footer>
+    </>
+  )
+}

fwt/components/Form.tsx

@@ -0,0 +1,16 @@
+import '../styles/Form.sass'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <form method="post" enctype="application/x-www-form-urlencoded">
+        {props.children}
+      </form>
+    </>
+  )
+}

fwt/components/HTML.tsx

@@ -0,0 +1,46 @@
+import '../styles/HTML.sass'
+import { type JSXElement, Show } from 'solid-js'
+import background1 from '../images/background.avif'
+import background2 from '../images/background.webp'
+
+interface Props {
+  title: string
+  name: string
+  description: string
+  children: JSXElement
+  font?: 'roboto' | 'inter' | 'montserrat' | 'open-sans' | 'public-sans'
+  preloadBackground?: boolean
+  author: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <html lang="en">
+        <head>
+          <base href="/" />
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+          <meta name="name" content={props.name} />
+          <meta name="description" content={props.description} />
+          <meta name="title" property="og:title" content={props.name} />
+          <meta name="keywords" content="HTML, CSS, JavaScript" />
+          <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" />
+          <Show when={props.font}>
+            <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+          </Show>
+          <Show when={props.preloadBackground}>
+            <link rel="preload" href={background1.src} as="image" type="image/svg+xml" />
+            <link rel="preload" href={background2.src} as="image" type="image/svg+xml" />
+          </Show>
+          <title>{props.title}</title>
+        </head>
+
+        <body class={props.font}>{props.children}</body>
+      </html>
+    </>
+  )
+}

fwt/components/Image.tsx

@@ -0,0 +1,19 @@
+interface Props {
+  avif: string
+  webp: string
+  size?: number
+  alt?: string
+  radius?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <picture>
+        <source srcset={props.avif} type="image/avif" />
+        <source srcset={props.webp} type="image/webp" />
+        <img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+      </picture>
+    </>
+  )
+}

fwt/components/Input.tsx

@@ -0,0 +1,27 @@
+import '../styles/Input.sass'
+import { createSignal } from 'solid-js'
+
+interface Props {
+  placeholder?: string
+  value?: string
+  onChange?: (value: string) => void
+}
+
+export default (props: Props) => {
+  const [inputValue, setInputValue] = createSignal(props.value || '')
+
+  const handleChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const newValue = target.value
+    setInputValue(newValue)
+    if (props.onChange) {
+      props.onChange(newValue)
+    }
+  }
+
+  return (
+    <>
+      <input class="input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
+    </>
+  )
+}

fwt/components/Link.tsx

@@ -0,0 +1,17 @@
+import '../styles/Link.sass'
+
+interface Props {
+  to: string
+  children?: any
+  newtab?: boolean
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <a href={props.to} aria-label={`Go to ${props.to}`} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
+        {props.children}
+      </a>
+    </>
+  )
+}

fwt/components/Logo.tsx

@@ -0,0 +1,19 @@
+import webpPath from '../images/logo.webp'
+import avifPath from '../images/logo.avif'
+
+interface Props {
+  size?: number
+  alt?: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <picture>
+        <source srcset={avifPath.src} type="image/avif" />
+        <source srcset={webpPath.src} type="image/webp" />
+        <img width={props.size} height="auto" decoding="async" loading="lazy" alt="logo" />
+      </picture>
+    </>
+  )
+}

fwt/components/Modal.tsx

@@ -0,0 +1,72 @@
+// <script>
+//   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>
+
+import '../styles/Modal.sass'
+import { type JSXElement, Show, createSignal } from 'solid-js'
+import gsap from 'gsap'
+import Button from './Button'
+
+interface Props {
+  children: JSXElement
+  background?: string
+  color?: string
+  border?: string
+}
+
+export default (props: Props) => {
+  let dialogRef!: HTMLDivElement
+
+  const [open, setOpen] = createSignal(false)
+
+  const openHandler = () => {
+    gsap.to(dialogRef, {
+      duration: 0,
+      display: 'flex',
+      ease: 'power2.out',
+    })
+  }
+
+  const closeHandler = () => {
+    gsap.to(dialogRef, {
+      duration: 0,
+      display: 'none',
+      ease: 'power2.out',
+    })
+  }
+
+  return (
+    <>
+      <div class="modal" ref={dialogRef} onClick={closeHandler}>
+        <Show when={props.border}>
+          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
+            {props.children}
+          </div>
+        </Show>
+
+        <Show when={!props.border}>
+          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
+            {props.children}
+          </div>
+        </Show>
+      </div>
+    </>
+  )
+}

fwt/components/ModalButton.tsx

@@ -0,0 +1,44 @@
+import '../styles/Button.sass'
+import { Show, Switch, Match } from 'solid-js'
+
+interface Props {
+  label?: string
+  onClick?: () => void
+  edges?: 'curved' | 'rounded' | 'flat'
+  design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
+}
+
+const getBorderRadius = (edge: Props['edges']) => {
+  switch (edge) {
+    case 'curved':
+      return 'border-radius: 6px'
+    case 'rounded':
+      return 'border-radius: 32px'
+    case 'flat':
+      return 'border-radius: 0'
+    default:
+      return 'border-radius: 0'
+  }
+}
+
+export default (props: Props) => {
+  const borderRadius = getBorderRadius(props.edges)
+
+  return (
+    <>
+      <Switch>
+        <Match when={props.design}>
+          <button class={props.design} onClick={props.onClick} style={borderRadius}>
+            {props.label || 'Click Me!'}
+          </button>
+        </Match>
+
+        <Match when={!props.design}>
+          <button class="button" onClick={props.onClick} style={borderRadius}>
+            {props.label || 'Click Me!'}
+          </button>
+        </Match>
+      </Switch>
+    </>
+  )
+}

fwt/components/Navbar.tsx

@@ -0,0 +1,17 @@
+import '../styles/Navbar.sass'
+import Row from './Row'
+
+interface Props {
+  transparent?: boolean
+  children: HTMLElement
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <nav class="nav" role="navigation" aria-label="main navigation">
+        <Row content="split">{props.children}</Row>
+      </nav>
+    </>
+  )
+}

fwt/components/Padding.tsx

@@ -0,0 +1,13 @@
+import { type JSXElement } from 'solid-js'
+
+interface Props {
+  left: number
+  right: number
+  top?: number
+  bottom?: number
+  children: JSXElement
+}
+
+export default (props: Props) => {
+  return <div style={{ padding: `${props.top || 0}rem ${props.right}rem ${props.bottom || 0}rem ${props.left}rem` }}>{props.children}</div>
+}

fwt/components/Page.tsx

@@ -0,0 +1,20 @@
+import '../styles/Page.sass'
+import { Show } from 'solid-js'
+
+interface Props {
+  children?: any
+  alignment?: 'row' | 'column'
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.alignment}>
+        <main class={props.alignment}>{props.children}</main>
+      </Show>
+      <Show when={!props.alignment}>
+        <main class="page">{props.children}</main>
+      </Show>
+    </>
+  )
+}

fwt/components/Row.tsx

@@ -0,0 +1,24 @@
+import '../styles/Row.sass'
+import { Show, type JSXElement } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
+  gap?: number
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.gap}>
+        <section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+          {props.children}
+        </section>
+      </Show>
+
+      <Show when={!props.gap}>
+        <section class={`row-${props.content || 'center'}`}>{props.children}</section>
+      </Show>
+    </>
+  )
+}

fwt/index.ts

@@ -0,0 +1,22 @@
+export { default as Background } from './components/Background'
+export { default as Box } from './components/Box'
+export { default as Button } from './components/Button'
+export { default as Column } from './components/Column'
+export { default as Copyright } from './components/Copyright'
+export { default as Footer } from './components/Footer'
+export { default as Form } from './components/Form'
+export { default as HTML } from './components/HTML'
+export { default as Image } from './components/Image'
+export { default as Link } from './components/Link'
+export { default as Logo } from './components/Logo'
+export { default as Navbar } from './components/Navbar'
+export { default as Page } from './components/Page'
+export { default as Row } from './components/Row'
+export { default as Display } from './components/Display'
+export { default as Padding } from './components/Padding'
+export { default as Modal } from './components/Modal'
+export { default as ModalButton } from './components/ModalButton'
+
+export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
+export { default as OptimizeImage } from './Optimizers/OptimizeImage'
+export { default as OptimizeLogo } from './Optimizers/OptimizeLogo'

fwt/styles/Background.sass

@@ -0,0 +1 @@
+@use '/src/styles/classes.sass'

fwt/styles/Box.sass

@@ -0,0 +1,6 @@
+.box
+  padding: 1rem
+
+.curvedbox
+  @extend .box
+  border-radius: 8px

fwt/styles/Button.sass

@@ -0,0 +1,223 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/fonts.sass' as fonts
+@use 'sass:color'
+
+$bulmaPrimary: rgb(0, 235, 199)
+$bulmaPrimaryText: rgb(0, 31, 26)
+$bulmaLink: rgb(92, 111, 255)
+$bulmaLinkText: rgb(245, 246, 255)
+$bulmaInfo: rgb(128, 217, 255)
+$bulmaInfoText: rgb(0, 36, 51)
+$bulmaSuccess: rgb(91, 205, 154)
+$bulmaSuccessText: rgb(10, 31, 21)
+$bulmaWarning: rgb(255, 191, 41)
+$bulmaWarningText: rgb(41, 29, 0)
+$bulmaDanger: rgb(255, 128, 153)
+$bulmaDangerText: rgb(26, 0, 5)
+$bulmaLight: rgb(255, 255, 255)
+$bulmaLightText: rgb(46, 51, 61)
+$bulmaDark: rgb(57, 63, 76)
+$bulmaDarkText: rgb(243, 244, 246)
+$bulmaText: rgb(31, 34, 41)
+$bulmaTextText: rgb(235, 236, 240)
+$bulmaGhost: rgba(0,0,0,0)
+$bulmaGhostText: rgb(66, 88, 255)
+
+$bootstrapTextLight: rgb(255, 255, 253)
+$bootstrapTextDark: rgb(0, 0, 2)
+$bootstrapTextLink: rgb(139, 185, 254)
+$bootstrapPrimary: rgb(13, 110, 253)
+$bootstrapSecondary: rgb(92, 99, 106)
+$bootstrapSuccess: rgb(21, 115, 71)
+$bootstrapDanger: rgb(187, 45, 59)
+$bootstrapWarning: rgb(255, 202, 44)
+$bootstrapInfo: rgb(49, 210, 242)
+$bootstrapLight: rgb(211, 212, 213)
+$bootstrapDark: rgb(33, 37, 41)
+
+.button
+  background-color: vars.$primaryColor
+  border: none
+  color: white
+  padding: 0.5rem 1.25rem
+  text-align: center
+  text-decoration: none
+  display: inline-block
+  font-size: 1rem
+  font-weight: 500
+  cursor: pointer
+  transition: all 0.2s ease-out
+
+  &:hover
+    background-color: color.adjust(vars.$primaryColor, $blackness: 20%)
+
+  &:active
+    transform: scale(0.95)
+
+.bu-primary
+  @extend .button
+  font-family: fonts.$Inter
+  background-color: $bulmaPrimary
+  color: $bulmaPrimaryText
+  border: none
+  font-size: 1rem
+  border-radius: 0.375rem
+  font-weight: 500
+  padding: 0.5rem 1.25rem
+  height: 2.5rem
+
+  &:hover
+    background-color: color.adjust($bulmaPrimary, $lightness: 10%)
+
+.bu-link
+  @extend .bu-primary
+  background-color: $bulmaLink
+  color: $bulmaLinkText
+
+  &:hover
+    background-color: color.adjust($bulmaLink, $lightness: 5%)
+
+.bu-info
+  @extend .bu-primary
+  background-color: $bulmaInfo
+  color: $bulmaInfoText
+
+  &:hover
+    background-color: color.adjust($bulmaInfo, $lightness: 5%)
+
+.bu-success
+  @extend .bu-primary
+  background-color: $bulmaSuccess
+  color: $bulmaSuccessText
+
+  &:hover
+    background-color: color.adjust($bulmaSuccess, $lightness: 5%)
+
+.bu-warning
+  @extend .bu-primary
+  background-color: $bulmaWarning
+  color: $bulmaWarningText
+
+  &:hover
+    background-color: color.adjust($bulmaWarning, $lightness: 5%)
+
+.bu-danger
+  @extend .bu-primary
+  background-color: $bulmaDanger
+  color: $bulmaDangerText
+
+  &:hover
+    background-color: color.adjust($bulmaDanger, $lightness: 5%)
+
+.bu-light
+  @extend .bu-primary
+  background-color: $bulmaLight
+  color: $bulmaLightText
+
+  &:hover
+    background-color: color.adjust($bulmaLight, $lightness: 5%)
+
+.bu-dark
+  @extend .bu-primary
+  background-color: $bulmaDark
+  color: $bulmaDarkText
+
+  &:hover
+    background-color: color.adjust($bulmaDark, $lightness: 5%)
+
+.bu-text
+  @extend .bu-primary
+  background-color: rgba(0,0,0,0)
+  color: $bulmaTextText
+  text-decoration: underline
+
+  &:hover
+    background-color: hsl(221,14%,14%)
+
+.bu-ghost
+  @extend .bu-primary
+  background-color: $bulmaGhost
+  color: $bulmaGhostText
+
+  &:hover
+    background-color: transparent
+    text-decoration: underline
+
+.bo-primary
+  @extend .button
+  font-family: 'Segoe UI', fonts.$Roboto
+  background-color: $bootstrapPrimary
+  color: $bootstrapTextLight
+  border: none
+  font-size: 1rem
+  border-radius: 0.375rem
+  font-weight: 400
+  padding: 0.5rem 1.25rem
+  height: 2.5rem
+  margin: 0.25rem 0.125rem
+
+  &:hover
+    background-color: color.adjust($bootstrapPrimary, $blackness: 10%)
+
+.bo-secondary
+  @extend .bo-primary
+  background-color: $bootstrapSecondary
+
+  &:hover
+    background-color: color.adjust($bootstrapSecondary, $blackness: 10%)
+
+.bo-success
+  @extend .bo-primary
+  background-color: $bootstrapSuccess
+
+  &:hover
+    background-color: color.adjust($bootstrapSuccess, $blackness: 10%)
+
+.bo-danger
+  @extend .bo-primary
+  background-color: $bootstrapDanger
+
+  &:hover
+    background-color: color.adjust($bootstrapDanger, $blackness: 10%)
+
+.bo-warning
+  @extend .bo-primary
+  background-color: $bootstrapWarning
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapWarning, $lightness: 5%)
+
+.bo-info
+  @extend .bo-primary
+  background-color: $bootstrapInfo
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapInfo, $lightness: 5%)
+
+.bo-light
+  @extend .bo-primary
+  background-color: $bootstrapLight
+  color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapLight, $blackness: 10%)
+
+.bo-dark
+  @extend .bo-primary
+  background-color: $bootstrapDark
+  // color: $bootstrapTextDark
+
+  &:hover
+    background-color: color.adjust($bootstrapDark, $lightness: 10%)
+
+.bo-link
+  @extend .bo-primary
+  background-color: transparent
+  color: $bootstrapTextLink
+  text-decoration: underline
+
+  &:hover
+    color: color.adjust($bootstrapTextLink, $lightness: 5%)
+    background-color: transparent

fwt/styles/Column.sass

@@ -0,0 +1,39 @@
+.column-top
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.column-center
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.column-right
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.column-split
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.column-spaced
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center

fwt/styles/Footer.sass

@@ -0,0 +1,13 @@
+@use '/src/styles/breakpoint.sass' as view
+
+.footer
+  padding: 1rem 0
+  margin: 0 2rem
+  position: fixed
+  bottom: 0
+  width: 100%
+  opacity: 0.8
+  font-size: 1rem
+
+  @media only screen and (max-width: view.$tablet)
+    font-size: 0.75rem

fwt/styles/HTML.sass

@@ -0,0 +1,25 @@
+@use '/src/styles/variables.sass' as vars
+@use '/src/styles/fonts.sass' as fonts
+
+.body
+  color: vars.$textColor
+
+.inter
+  @extend .body
+  font-family: fonts.$Inter
+
+.roboto
+  @extend .body
+  font-family: fonts.$Roboto
+
+.montserrat
+  @extend .body
+  font-family: fonts.$Montserrat
+
+.open-sans
+  @extend .body
+  font-family: fonts.$OpenSans
+
+.public-sans
+  @extend .body
+  font-family: fonts.$PublicSans

fwt/styles/Input.sass

@@ -0,0 +1,27 @@
+.input
+  font-size: 1rem
+  padding: 0.5rem 1rem
+  width: 100%
+  border: 2px solid #ccc
+  border-radius: 4px
+  outline: none
+  transition: border-color 0.3s, box-shadow 0.3s
+
+  &:focus
+    border-color: #3377AC
+    box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)
+
+  &::placeholder
+    color: #888
+    font-style: italic
+
+  &:disabled
+    background-color: #f0f0f0
+    border-color: #ddd
+
+  &--error
+    border-color: #ff4d4f
+    box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)
+
+    &:focus
+      border-color: #e81123

fwt/styles/Link.sass

@@ -0,0 +1,3 @@
+a
+  text-decoration: none
+  color: inherit

fwt/styles/Modal.sass

@@ -0,0 +1,20 @@
+@use '/src/styles/variables.sass' as vars
+@use 'sass:color'
+
+.modal
+  display: flex
+  justify-content: center
+  align-items: center
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  backdrop-filter: blur(20px)
+  background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.6)
+  z-index: 999
+
+  &__content
+    border-radius: 8px
+    padding: 2rem
+    position: relative

fwt/styles/Navbar.sass

@@ -0,0 +1,7 @@
+.nav
+  position: fixed
+  top: 0
+  width: 100%
+  padding: 1rem 0
+  // margin: 5rem
+

fwt/styles/Page.sass

@@ -0,0 +1,13 @@
+.page
+  margin: 2rem
+  height: auto
+  min-height: 90vh
+
+.column
+  @extend .page
+  display: flex
+  flex-direction: column
+
+.row
+  @extend .column
+  flex-direction: row

fwt/styles/Row.sass

@@ -0,0 +1,47 @@
+.row-left
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-start
+  align-items: center
+  align-content: center
+
+.row-center
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: center
+  align-items: center
+  align-content: center
+
+.row-right
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: flex-end
+  align-items: center
+  align-content: center
+
+.row-split
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-between
+  align-items: center
+  align-content: center
+
+.row-spaced
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
+  align-content: center
+
+.row-even
+  display: flex
+  flex-direction: row
+  flex-wrap: wrap
+  justify-content: space-evenly
+  align-items: center
+  align-content: center

fwt/styles/Viewport.sass

@@ -0,0 +1 @@
+@use '/src/styles/breakpoint.sass'

nginx/nginx.conf

@@ -0,0 +1,31 @@
+worker_processes  1;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  server {
+    listen 8080;
+    server_name   _;
+
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    include /etc/nginx/mime.types;
+
+    gzip on;
+    gzip_min_length 1000;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+
+    error_page 404 /404.html;
+    location = /404.html {
+            root /usr/share/nginx/html;
+            internal;
+    }
+
+    location / {
+            try_files $uri $uri/index.html =404;
+    }
+  }
+}

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "fast-webapp-template",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "test": "playwright clear-cache && playwright test"
+  },
+  "dependencies": {
+    "@astrojs/solid-js": "^5.1.1",
+    "@itsmatteomanf/astro-robots-txt": "^0.2.0",
+    "@nanostores/solid": "^1.1.1",
+    "@supabase/supabase-js": "^2.57.4",
+    "astro": "^5.13.8",
+    "astro-compressor": "^1.1.2",
+    "astro-purgecss": "^5.3.0",
+    "gsap": "^3.13.0",
+    "lightningcss": "^1.30.1",
+    "nanostores": "^1.0.1",
+    "purgecss": "^7.0.2",
+    "sharp": "^0.34.4",
+    "solid-icons": "^1.1.0",
+    "solid-js": "^1.9.9"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.55.0",
+    "@types/node": "^24.5.2",
+    "sass-embedded": "^1.92.1"
+  }
+}

playwright.config.ts

@@ -0,0 +1,55 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+})

podman.container

@@ -0,0 +1,13 @@
+[Unit]
+Description=FWT
+
+[Container]
+ContainerName=fwt
+Image=localhost/fwt
+PublishPort=8080:8080
+
+[Service]
+Restart=always
+
+[Install]
+WantedBy=multi-user.target default.target

src/components/Input/Input.tsx

@@ -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>
+    </>
+  )
+}

src/layouts/Layout.astro

@@ -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>

src/pages/index.astro

@@ -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>

src/pages/login.astro

@@ -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>

src/pages/main.astro

@@ -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>

src/pages/register.astro

@@ -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>

src/stores/sample.ts

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

src/styles/breakpoint.sass

@@ -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

src/styles/classes.sass

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

src/styles/fonts.sass

@@ -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

src/styles/variables.sass

@@ -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%)

src/utils/db/supabase.js

@@ -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)

tests/index.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+
+test('page loaded correctly', async ({ page }) => {
+  await page.goto('http://localhost:4321')
+
+  await expect(page).toHaveTitle('FWT')
+
+  const descriptionMeta = await page.getAttribute('meta[name="name"]', 'content')
+  expect(descriptionMeta).toBe('Template')
+
+  const keywordsMeta = await page.getAttribute('meta[name="description"]', 'content')
+  expect(keywordsMeta).toBe('This is just a template.')
+})
+
+test('background loaded correctly', async ({ page }) => {
+  await page.goto('http://localhost:4321')
+
+  const headerTitle = await page.textContent('h1')
+  expect(headerTitle).toBe('Fast WebApp Template')
+})
+
+test('header title is visible and contains correct text', async ({ page }) => {
+  await page.goto('http://localhost:4321')
+
+  const headerTitle = await page.textContent('h1')
+  expect(headerTitle).toBe('Fast WebApp Template')
+})

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  }
+}