hrms-bangkok/hrms-exam
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ css , เมนูหน้าแรก

Browse source
This commit is contained in:
Tanyalak 2023-04-04 17:55:31 +07:00
parent 1c9b5877d6
commit 0aa684f2fb
2131 changed files with 365205 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

13
cms/src/app.html
View file

@ -2,12 +2,21 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<!-- <link rel="icon" href="%sveltekit.assets%/favicon.png" /> -->
<meta name="viewport" content="width=device-width" />
<link rel="manifest" href="manifest.json" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/styles/tailwind.css" />
<link rel="stylesheet" href="/vendor/fontawesome-free/css/all.min.css"/>
<title>กองสรรหาบุคคล</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<body data-sveltekit-preload-data="hover" class="text-blueGray-700 h-screen font-noto">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
<style>
.navbar{
border-bottom: 1px solid #92b4c847;
}
</style>

3
cms/src/app.postcss
View file

@ -2,6 +2,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@charset url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap");
@layer base {
h1 {
@apply text-4xl;
@ -15,4 +16,4 @@
ol{
@apply list-decimal
}
}
}

145
cms/src/lib/components/Footer.svelte Normal file
View file

@ -0,0 +1,145 @@
<script>
// make dynamic date to be added to footer
let date = new Date().getFullYear();
</script>
<footer class="relative bg-blueGray-200 pt-8 pb-6">
<div
class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
style="transform: translateZ(0);"
>
<svg
class="absolute bottom-0 overflow-hidden"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
class="text-blueGray-200 fill-current"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
</div>
<div class="container mx-auto px-4">
<div class="flex flex-wrap text-center lg:text-left">
<div class="w-full lg:w-6/12 px-4">
<h5 class="text-2xl font-semibold">กองสรรหาบุคคล</h5>
<h6 class="text-md mt-1 mb-2 text-blueGray-600">
173 ถนนดินสอ แขวงเสาชิงช้า เขตพระนคร กรุงเทพมหานคร 10200
</h6>
<div class="mt-6 lg:mb-0 mb-6">
<button
class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
type="button"
>
<i class="fab fa-facebook-square"></i>
</button>
<button
class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
type="button"
>
<i class="fab fa-dribbble"></i>
</button>
</div>
</div>
<div class="w-full lg:w-6/12 px-4">
<div class="flex flex-wrap items-top mb-6">
<div class="w-full lg:w-4/12 px-4 ml-auto">
<span
class="block uppercase text-blueGray-500 text-sm font-semibold mb-2"
>
ส่วนราชการ
</span>
<ul class="list-none">
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://webportal.bangkok.go.th/KSB"
>
กองสรรหาบุคคล
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://webportal.bangkok.go.th/pdbma"
>
กองพัฒนาระบบราชการ
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://webportal.bangkok.go.th/csc_personal"
>
กองอัตรากำลัง
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="http://203.155.220.238/csc/index.php/en/discipline-morality"
>
กองทะเบียนประวัติข้าราชการ
</a>
</li>
</ul>
</div>
<div class="w-full lg:w-4/12 px-4">
<span
class="block uppercase text-blueGray-500 text-sm font-semibold mb-2"
>
หน่วยงาน
</span>
<ul class="list-none">
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://main.bangkok.go.th/"
>
กรุงเทพมหานคร
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://webportal.bangkok.go.th/pdd"
>
สนป.กทม./กองการเจ้าหน้าที่
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://webportal.bangkok.go.th/bangkokeducation"
>
สำนักการศึกษา กทม.
</a>
</li>
<li>
<a
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
href="https://www.ocsc.go.th/"
>
สำนักงาน ก.พ.
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr class="my-6 border-blueGray-300" />
<div class="flex flex-wrap items-center md:justify-between justify-center">
<div class="w-full md:w-4/12 px-4 mx-auto text-center">
<div class="text-sm text-blueGray-500 font-semibold py-1">
Copyright © {date} bangkok.go.th/ksb All rights reserved.
</div>
</div>
</div>
</div>
</footer>

98
cms/src/lib/components/Header.svelte
View file

@ -1,33 +1,65 @@
<div class="navbar bg-base-100">
<div class="navbar-start">
<div class="dropdown">
<!-- svelte-ignore a11y-label-has-associated-control -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<label tabindex="0" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</label>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="/">หน้าหลัก</a></li>
<li><a href="/qualifying">การสอบคัดเลือก</a></li>
<li><a href="/competitive">การสอบแข่งขัน</a></li>
<li><a href="/about">เกี่ยวกับเรา</a></li>
</ul>
</div>
<a
href="https://webportal.bangkok.go.th/KSB/page/top/1119/%E0%B8%81%E0%B8%AD%E0%B8%87%E0%B8%AA%E0%B8%A3%E0%B8%A3%E0%B8%AB%E0%B8%B2%E0%B8%9A%E0%B8%B8%E0%B8%84%E0%B8%84%E0%B8%A5">
<img src="images/logo.jpg" alt="logo">
</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="/">หน้าหลัก</a></li>
<li><a href="/qualifying">การสอบคัดเลือก</a></li>
<li><a href="/competitive">การสอบแข่งขัน</a></li>
<li><a href="/about">เกี่ยวกับเรา</a></li>
</ul>
</div>
<div class="navbar-end">
</div>
</div>
<div class="navbar bg-white w-full top-0 z-50 fixed flex-wrap items-center justify-between px-4">
<div
class="container px-4 mx-auto flex flex-no-wrap items-center justify-between"
>
<div class="flex-1">
<div class="justify-start flex">
<div class="content-center grid">
<div class="avatar">
<div class="w-10 rounded-full">
<img src="/images/logo.png" alt="logo">
</div>
</div>
</div>
<div class="content-center grid pl-4">
<a class="textline1"
href="https://webportal.bangkok.go.th/KSB/page/top/1119/%E0%B8%81%E0%B8%AD%E0%B8%87%E0%B8%AA%E0%B8%A3%E0%B8%A3%E0%B8%AB%E0%B8%B2%E0%B8%9A%E0%B8%B8%E0%B8%84%E0%B8%84%E0%B8%A5">
กองสรรหาบุคคล
</a>
<div class="textline2">สำนักงาน ก.ก.</div>
</div>
</div>
</div>
<div class="flex-none gap-2">
<div class="dropdown lg:hidden">
<!-- svelte-ignore a11y-label-has-associated-control -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<label tabindex="0" class="btn btn-ghost ">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</label>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="/">หน้าหลัก</a></li>
<li><a href="/qualifying">การสอบคัดเลือก</a></li>
<li><a href="/competitive">การสอบแข่งขัน</a></li>
<li><a href="/about">เกี่ยวกับเรา</a></li>
</ul>
</div>
<div class="tabs hidden lg:flex w-full"><!-- tab-active -->
<a href="/" class="tab " >หน้าแรก</a>
<a href="/qualifying" class="tab ">การสอบคัดเลือก</a>
<a href="/competitive" class="tab">การสอบแข่งขัน</a>
<a href="/about" class="tab">เกี่ยวกับเรา</a>
</div>
<!-- <button class="btn btn-primary btn-outline">
<i class="fa-solid fa-arrow-right-to-bracket"></i>
<span class="pl-3">เข้าสู่ระบบ</span>
</button> -->
</div>
</div>
</div>
<style>
.textline1{
line-height:1.2rem !important;
font-weight: 400;
/* color: #02A998; */
}
.textline2{
font-size: 0.80rem;
line-height:1.3rem !important;
letter-spacing: 0.05rem;
font-weight: 400;
color: #96a9ad;
}
</style>

8
cms/src/routes/+layout.svelte
View file

@ -1,9 +1,11 @@
<script>
import '../app.postcss';
import Header from '$lib/components/Header.svelte';
import Footer from '$lib/components/Footer.svelte';
</script>
<Header />
<slot />
<div class="justify-center place-content-center" style="padding-top:50px">
<slot />
</div>
<Footer />

326
cms/src/routes/+page.svelte
View file

@ -5,9 +5,15 @@
const qualify_exams = data.qualify_exams;
const competitive_exams = data.competitive_exams;
const detail = data.detail;
import FullCalendar from '$lib/components/FullCalendar.svelte';
const patternVue = "/images/pattern.png";
const sel1 = "/images/sel1.png";
const sel2 = "/images/sel2.png";
const sel3 = "/images/sel3.png";
const com1 = "/images/com1.jpg";
const com2 = "/images/com2.jpg";
const com3 = "/images/com3.jpg";
/* import FullCalendar from '$lib/components/FullCalendar.svelte';
import daygridPlugin from '@fullcalendar/daygrid';
//import timegridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import type { EventClickArg } from '@fullcalendar/core';
let calendarRef;
@ -49,10 +55,276 @@
],
dateClick: clickDate,
eventClick: clickEvent,
};
}; */
</script>
<h1 class="p-5 text-center text-orange-800">กองสรรหาบุคคล</h1>
<section class="header relative items-start mt-12 flex max-h-860-px">
<div class="container mx-auto items-start flex flex-wrap">
<div class="w-full md:w-6/12 lg:w-6/12 xl:w-6/12 px-6">
<div class="pt-16 sm:pt-18">
<h2 class="font-semibold text-3xl text-blueGray-600">
กองสรรหาบุคคล
</h2>
<h2 class="pt-1 text-2xl text-red-400">
Recruitment Division
</h2>
<p class="mt-4 text-lg leading-relaxed text-blueGray-500">
การสรรหาและเลือกสรรบุคคลเข้ารับราชการเป็นข้าราชการกรุงเทพมหานครสามัญ และข้าราชการครูกรุงเทพมหานครเฉพาะสังกัดสำนักพัฒนา
ชุมชน
</p>
<div class="mt-12">
<a
href="/qualifying"
target="_blank"
class=" text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-400 active:bg-red-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
>
การสอบคัดเลือก
</a>
<a
href="/competitive"
class=" ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
target="_blank"
>
การสอบแข่งขัน
</a>
</div>
</div>
</div>
</div>
<img
class="absolute top-0 b-auto right-0 sm:w-5/12 -mt-48 sm:mt-0 w-9/12 hidden md:flex"
src="{patternVue}"
alt="..."
/>
</section>
<section class="mt-48 md:mt-40 pb-40 relative bg-blueGray-100">
<div
class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
style="transform: translateZ(0);"
>
<svg
class="absolute bottom-0 overflow-hidden"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
class="text-blueGray-100 fill-current"
points="2560 0 2560 100 0 100"
></polygon>
</svg>
</div>
<!-- ประกาศเกี่ยวกับการคัดเลือกบุคลากรกทม. -->
<div class="container mx-auto">
<div class="flex flex-wrap px-6">
<div
class="w-full pt-24 mb-10 flex flex-wrap justify-between">
<h6 class="text-2xl font-semibold ">
ประกาศเกี่ยวกับ<span class="text-red-400">การคัดเลือกบุคลากรกทม.</span>
</h6>
<a
href="/"
target="_blank"
class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
>
ประกาศทั้งหมด
<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
</a>
</div>
<div
class="w-full lg:w-6/12 cardxl"
>
<div class="card bg-white shadow-xl w-full ">
<figure style="height: 250px;" class="img-hover-zoom--brightness">
<img src="{sel1}" alt="1" />
</figure>
<div class="card-body">
<div class="text-sm font-medium text-gray-500">
ข่าววันที่ : 24 มี.ค. 2566
<div class="badge badge-secondary text-white ml-4">NEW</div>
</div>
<div class="card-title font-medium">
ด่วน !! ประกาศวัน เวลา สถานที่ และระเบียบการคัดเลือกลูกจ้างกทม.
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-6/12">
<div class="flex flex-wrap space-y-8">
<div class="flex flex-col w-full">
<div class="card card-side bg-white shadow-xl w-full">
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
<img src="{sel2}" alt="1" class="h-full" />
</figure>
<div class="card-body w-full lg:w-7/12">
<h2 class="text-sm font-medium text-gray-500">
ข่าววันที่ : 3 มี.ค. 2566
</h2>
<div class="card-title font-medium">
ประกาศรายชื่อผู้มีสิทธิเข้ารับการคัดเลือกบุคลากรกทม.เป็นข้าราชการฯ ครั้งที่ 1/2565
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
</div>
</div>
</div>
</div>
<div class=" flex flex-col w-full">
<div class="card card-side bg-white shadow-xl w-full">
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
<img src="{sel3}" alt="1" class="h-full"/>
</figure>
<div class="card-body w-full lg:w-7/12">
<div class="text-sm font-medium text-gray-500">
ข่าววันที่ : 20 ธันวาคม 2566
</div>
<div class="card-title font-medium">
ประกาศรับสมัครคัดเลือกบุคลากรกทม. !!
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ประกาศเกี่ยวกับการสอบแข่งขัน -->
<div class="container mx-auto mt-4">
<div class="flex flex-wrap px-6">
<div
class="w-full pt-24 mb-10 flex flex-wrap justify-between">
<h6 class="text-2xl font-semibold ">
ประกาศเกี่ยวกับ<span class="text-red-400">การสอบแข่งขัน</span>
</h6>
<a
href="/"
target="_blank"
class="font-semibold text-gray-500 hover:text-gray-400 ease-linear transition-all duration-150"
>
ประกาศทั้งหมด
<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
</a>
</div>
<div
class="w-full lg:w-6/12 cardxl"
>
<div class="card bg-white shadow-xl w-full ">
<figure style="height: 250px;" class="img-hover-zoom--brightness">
<img src="{com1}" alt="1" />
</figure>
<div class="card-body">
<div class="text-sm font-medium text-gray-500">
ข่าววันที่ : 24 มี.ค. 2566
<div class="badge badge-secondary text-white ml-4">NEW</div>
</div>
<div class="card-title font-medium">
ประกาศรายชื่อผู้ผ่านภาค ข. และมีสิทธิสอบภาค ค. ในการคัดเลือกคนพิการ ครั้งที่ 1/2565
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-6/12">
<div class="flex flex-wrap space-y-8">
<div class="flex flex-col w-full">
<div class="card card-side bg-white shadow-xl w-full">
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
<img src="{com2}" alt="1" class="h-full" />
</figure>
<div class="card-body w-full lg:w-7/12">
<h2 class="text-sm font-medium text-gray-500">
ข่าววันที่ : 13 มี.ค. 2566
</h2>
<div class="card-title font-medium">
ใครลืมส่งเอกสาร !! สำหรับการคัดเลือกคนพิการฯ ครั้งที่ 1/2565 ส่งเอกสารเพิ่มได้
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
</div>
</div>
</div>
</div>
<div class=" flex flex-col w-full">
<div class="card card-side bg-white shadow-xl w-full">
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
<img src="{com3}" alt="1" class="h-full"/>
</figure>
<div class="card-body w-full lg:w-7/12">
<div class="text-sm font-medium text-gray-500">
ข่าววันที่ : 9 มี.ค. 2566
</div>
<div class="card-title font-medium">
แผนที่การเดินทางมาสนามสอบคนพิการฯ ครั้งที่ 1/2565
</div>
<div class="mt-4 text-sm row-auto no-wrap">
<i class="fab fa-twitter text-blue-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-facebook-f text-blue-700"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
<i class="fab fa-line text-green-500"></i>
<span class="pl-2 pr-4 text-gray-400">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- <h1 class="p-5 text-center text-orange-800">กองสรรหาบุคคล</h1>
<div class="w-full flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0" >
<div class="md:w-2/5 lg:w-2/5 px-3">
@ -105,5 +377,49 @@
<div class="px-5">
<h2>Full Size Calendar</h2>
<FullCalendar bind:this={calendarRef} {options} />
</div>
</div> -->
<style>
@media only screen and (max-width: 1024px) {
.card-side{
flex-direction: column !important;
}
.cardxl{
padding-right: 0rem !important;
padding-bottom: 2rem;
}
.imgCard{
height: 250px;
}
}
.card-side{
flex-direction: row;
}
.cardxl{
padding-right: 2rem;
}
.card-title{
height: 80px;
align-items: start;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.imgCard{
max-height: 220px;
}
.img-hover-zoom--brightness img {
transition: transform 2s, filter 1.5s ease-in-out;
transform-origin: center center;
filter: brightness(97%);
}
/* The Transformation */
.img-hover-zoom--brightness:hover img {
filter: brightness(100%);
transform: scale(1.3);
}
</style>

19
cms/src/routes/about/+page.svelte
View file

@ -5,14 +5,17 @@
export let data: PageData;
</script>
<div class="p-5 max-w-4xl place-content-center ">
{@html data.detail}
</div>
<div>{data.contact.description}</div>
<div>{ver.version}</div>
<div>{ver.builddate}</div>
<section class="items-start h-screen flex max-h-860-px pt-10 bg-blueGray-100">
<div class="container mx-auto items-start flex flex-wrap px-4">
<div >
{@html data.detail}
</div>
<div>{data.contact.description}</div>
<div>{ver.version}</div>
<div>{ver.builddate}</div>
</div>
</section>

63
cms/src/routes/competitive/+page.svelte
View file

@ -4,25 +4,44 @@
const exams = data.exams
</script>
<h1 class="p-5">การสอบแข่งขัน</h1>
<div class="p-5">
<table class="table table-compact w-full">
<thead>
<tr>
<th>วันที่</th>
<th>การสอบ</th>
<th>หน่วยงาน</th>
</tr>
</thead>
<tbody>
{#each exams as exam}
<tr>
<th><a href={"/exams/"+exam.id}>{exam.date}</a></th>
<td>{exam.detail}</td>
<td>{exam.institute}</td>
{/each}
</tbody>
</table>
</div>
<section class="items-start h-screen flex max-h-860-px pt-10 bg-blueGray-100">
<div class="container mx-auto items-start flex flex-wrap px-4">
<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">
การสอบแข่งขัน
</h2>
<div
class=" relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-white"
>
<div class="rounded-t mb-0 px-4 py-3 border-0">
<div class="flex flex-wrap items-center">
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
<h3
class="font-semibold text-lg text-blueGray-700'"
>
รายการสอบ
</h3>
</div>
</div>
</div>
<div class="block w-full overflow-x-auto">
<table class="items-center w-full bg-transparent border-collapse">
<thead>
<tr>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">วันที่</th>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">การสอบ</th>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">หน่วยงาน</th>
</tr>
</thead>
<tbody>
{#each exams as exam}
<tr>
<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href={"/exams/"+exam.id}>{exam.date}</a></th>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.detail}</td>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.institute}</td>
{/each}
</tbody>
</table>
</div>
</div>
</div>
</section>

64
cms/src/routes/qualifying/+page.svelte
View file

@ -4,26 +4,44 @@
const exams = data.exams
</script>
<h1 class="p-5">การสอบคัดเลือก</h1>
<div class="p-5">
้<h2>รายการสอบ</h2>
<table class="table table-compact w-full">
<thead>
<tr>
<th>วันที่</th>
<th>การสอบ</th>
<th>หน่วยงาน</th>
</tr>
</thead>
<tbody>
{#each exams as exam}
<tr>
<th><a href={"/exams/"+exam.id}>{exam.date}</a></th>
<td>{exam.detail}</td>
<td>{exam.institute}</td>
{/each}
</tbody>
</table>
</div>
<section class="items-start h-screen flex max-h-860-px pt-10 bg-blueGray-100">
<div class="container mx-auto items-start flex flex-wrap px-4">
<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">
การสอบคัดเลือก
</h2>
<div
class=" relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-white"
>
<div class="rounded-t mb-0 px-4 py-3 border-0">
<div class="flex flex-wrap items-center">
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
<h3
class="font-semibold text-lg text-blueGray-700'"
>
รายการสอบ
</h3>
</div>
</div>
</div>
<div class="block w-full overflow-x-auto">
<table class="items-center w-full bg-transparent border-collapse">
<thead>
<tr>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">วันที่</th>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">การสอบ</th>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">หน่วยงาน</th>
</tr>
</thead>
<tbody>
{#each exams as exam}
<tr>
<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href={"/exams/"+exam.id}>{exam.date}</a></th>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.detail}</td>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.institute}</td>
{/each}
</tbody>
</table>
</div>
</div>
</div>
</section>