886 lines
32 KiB
HTML
886 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>AGC Design System - Component Library</title>
|
|
<meta
|
|
name="description"
|
|
content="Design system for the Attorney General's Chambers Document Search Interface"
|
|
/>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<!-- External CSS Libraries -->
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<!-- Custom CSS -->
|
|
<link href="css/styles.css" rel="stylesheet" />
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-900">
|
|
<div class="skip-to-content" tabindex="0">Skip to content</div>
|
|
|
|
<header class="bg-white shadow-sm">
|
|
<div class="container mx-auto px-4 py-4">
|
|
<h1 class="text-2xl font-bold text-blue-900">AGC Design System</h1>
|
|
<p class="text-gray-600">
|
|
Component Library for the Attorney General's Chambers Document Search
|
|
Interface
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mx-auto px-4 py-8">
|
|
<!-- Table of Contents -->
|
|
<section class="mb-10">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Table of Contents</h2>
|
|
<ul class="space-y-2">
|
|
<li>
|
|
<a
|
|
href="#colors"
|
|
class="text-blue-600 hover:text-blue-800 transition"
|
|
>Color Palette</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#typography"
|
|
class="text-blue-600 hover:text-blue-800 transition"
|
|
>Typography</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#buttons"
|
|
class="text-blue-600 hover:text-blue-800 transition"
|
|
>Buttons</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#forms"
|
|
class="text-blue-600 hover:text-blue-800 transition"
|
|
>Form Controls</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#cards"
|
|
class="text-blue-600 hover:text-blue-800 transition"
|
|
>Cards</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#badges"
|
|
class="text-blue-600 hover:text-blue-800 transition"
|
|
>Badges</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#alerts"
|
|
class="text-blue-600 hover:text-blue-800 transition"
|
|
>Alerts & Toasts</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#tabs"
|
|
class="text-blue-600 hover:text-blue-800 transition"
|
|
>Tabs</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#tooltips"
|
|
class="text-blue-600 hover:text-blue-800 transition"
|
|
>Tooltips & Dropdowns</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#animations"
|
|
class="text-blue-600 hover:text-blue-800 transition"
|
|
>Animations</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Color Palette -->
|
|
<section id="colors" class="mb-10">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Color Palette</h2>
|
|
|
|
<h3 class="text-lg font-medium mt-6 mb-3">Primary Colors (Navy)</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
<div>
|
|
<div class="h-20 bg-navy-900 rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Navy 900</div>
|
|
<div class="text-gray-600">#1e2d4c</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-20 bg-navy-700 rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Navy 700</div>
|
|
<div class="text-gray-600">#2c4272</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-20 bg-navy-500 rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Navy 500</div>
|
|
<div class="text-gray-600">#4065a2</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-20 bg-navy-300 rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Navy 300</div>
|
|
<div class="text-gray-600">#8eaed3</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-20 bg-navy-100 rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Navy 100</div>
|
|
<div class="text-gray-600">#dbe6f3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-medium mt-6 mb-3">Secondary Colors (Gold)</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
<div>
|
|
<div class="h-20 bg-gold-900 rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Gold 900</div>
|
|
<div class="text-gray-600">#653310</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-20 bg-gold-700 rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Gold 700</div>
|
|
<div class="text-gray-600">#965709</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-20 bg-gold-500 rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Gold 500</div>
|
|
<div class="text-gray-600">#e29807</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-20 bg-gold-300 rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Gold 300</div>
|
|
<div class="text-gray-600">#f8cb47</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-20 bg-gold-100 rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Gold 100</div>
|
|
<div class="text-gray-600">#fdf1c7</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-medium mt-6 mb-3">UI Colors</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<div class="h-20 bg-success rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Success</div>
|
|
<div class="text-gray-600">#059669</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-20 bg-warning rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Warning</div>
|
|
<div class="text-gray-600">#d97706</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-20 bg-error rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Error</div>
|
|
<div class="text-gray-600">#dc2626</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="h-20 bg-gray-100 rounded-t-lg"></div>
|
|
<div
|
|
class="bg-white p-2 border border-gray-200 rounded-b-lg text-xs"
|
|
>
|
|
<div class="font-semibold">Gray</div>
|
|
<div class="text-gray-600">#f3f4f6</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Typography -->
|
|
<section id="typography" class="mb-10">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Typography</h2>
|
|
|
|
<h3 class="text-lg font-medium mb-3">Headings</h3>
|
|
<div class="space-y-4 border-b border-gray-200 pb-6 mb-6">
|
|
<div>
|
|
<h1>Heading 1</h1>
|
|
<div class="text-sm text-gray-500">
|
|
font-size: 1.875rem (30px) | font-weight: 700
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2>Heading 2</h2>
|
|
<div class="text-sm text-gray-500">
|
|
font-size: 1.5rem (24px) | font-weight: 600
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>Heading 3</h3>
|
|
<div class="text-sm text-gray-500">
|
|
font-size: 1.25rem (20px) | font-weight: 600
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4>Heading 4</h4>
|
|
<div class="text-sm text-gray-500">
|
|
font-size: 1.125rem (18px) | font-weight: 600
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-medium mb-3">Body Text</h3>
|
|
<div class="space-y-4 border-b border-gray-200 pb-6 mb-6">
|
|
<div>
|
|
<p class="text-base">
|
|
Regular text (16px): The Attorney General's Chambers of Malaysia
|
|
provides legal advice to the Government and represents the
|
|
Government in legal proceedings.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm">
|
|
Small text (14px): The Attorney General's Chambers of Malaysia
|
|
provides legal advice to the Government and represents the
|
|
Government in legal proceedings.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs">
|
|
Extra small text (12px): The Attorney General's Chambers of
|
|
Malaysia provides legal advice to the Government and represents
|
|
the Government in legal proceedings.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-medium mb-3">Text Styling</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<p class="font-bold mb-2">Bold text</p>
|
|
<p class="font-semibold mb-2">Semibold text</p>
|
|
<p class="font-medium mb-2">Medium text</p>
|
|
<p class="font-normal mb-2">Normal text</p>
|
|
<p class="italic mb-2">Italic text</p>
|
|
</div>
|
|
<div>
|
|
<p class="underline mb-2">Underlined text</p>
|
|
<p class="line-through mb-2">Strikethrough text</p>
|
|
<p class="text-navy-700 mb-2">Colored text</p>
|
|
<p class="text-gold-600 mb-2">Colored text</p>
|
|
<p>
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 transition"
|
|
>Link text</a
|
|
>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Buttons -->
|
|
<section id="buttons" class="mb-10">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Buttons</h2>
|
|
|
|
<h3 class="text-lg font-medium mb-3">Button Variants</h3>
|
|
<div class="flex flex-wrap gap-4 border-b border-gray-200 pb-6 mb-6">
|
|
<button class="btn btn-primary">Primary Button</button>
|
|
<button class="btn btn-secondary">Secondary Button</button>
|
|
<button class="btn btn-outline">Outline Button</button>
|
|
<button class="btn btn-ghost">Ghost Button</button>
|
|
<button class="btn btn-primary" disabled>Disabled Button</button>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-medium mb-3">Button Sizes</h3>
|
|
<div
|
|
class="flex flex-wrap items-center gap-4 border-b border-gray-200 pb-6 mb-6"
|
|
>
|
|
<button class="btn btn-primary btn-sm">Small Button</button>
|
|
<button class="btn btn-primary">Regular Button</button>
|
|
<button class="btn btn-primary btn-lg">Large Button</button>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-medium mb-3">Button with Icon</h3>
|
|
<div class="flex flex-wrap gap-4">
|
|
<button class="btn btn-primary flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
Add New
|
|
</button>
|
|
<button class="btn btn-outline flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
Download
|
|
</button>
|
|
<button class="btn btn-icon btn-ghost">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Form Controls -->
|
|
<section id="forms" class="mb-10">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Form Controls</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h3 class="text-lg font-medium mb-3">Text Inputs</h3>
|
|
<div class="space-y-4">
|
|
<div class="form-group">
|
|
<label for="default-input" class="form-label"
|
|
>Default Input</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="default-input"
|
|
class="form-control"
|
|
placeholder="Enter text"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="focused-input" class="form-label"
|
|
>Focused Input</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="focused-input"
|
|
class="form-control focus"
|
|
placeholder="This input has focus"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="disabled-input" class="form-label"
|
|
>Disabled Input</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="disabled-input"
|
|
class="form-control"
|
|
placeholder="Disabled input"
|
|
disabled
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-medium mb-3">Other Form Elements</h3>
|
|
<div class="space-y-4">
|
|
<div class="form-group">
|
|
<label for="select-input" class="form-label"
|
|
>Select Input</label
|
|
>
|
|
<select id="select-input" class="form-control">
|
|
<option value="">Select an option</option>
|
|
<option value="1">Option 1</option>
|
|
<option value="2">Option 2</option>
|
|
<option value="3">Option 3</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="textarea-input" class="form-label"
|
|
>Textarea</label
|
|
>
|
|
<textarea
|
|
id="textarea-input"
|
|
class="form-control"
|
|
rows="3"
|
|
placeholder="Enter multiple lines of text"
|
|
></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Checkbox</label>
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
id="checkbox1"
|
|
class="h-4 w-4 text-blue-600"
|
|
/>
|
|
<label for="checkbox1">Checkbox option</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-medium mt-6 mb-3">Search Input</h3>
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
class="form-control pl-10 pr-4"
|
|
placeholder="Search for legal documents..."
|
|
/>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cards -->
|
|
<section id="cards" class="mb-10">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Cards</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- Basic Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="text-lg font-medium">Basic Card</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>
|
|
This is a basic card with header, body, and footer sections.
|
|
</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button class="btn btn-sm btn-primary">Action</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document Card -->
|
|
<div class="document-card">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<span class="document-tag document-tag-lkk">LKK</span>
|
|
<h3 class="font-medium">
|
|
Pendakwa Raya v. Ahmad bin Abdullah
|
|
</h3>
|
|
<p class="text-sm text-gray-600 mt-1">[2023] 5 MLJ 123</p>
|
|
</div>
|
|
<button
|
|
class="text-gray-400 hover:text-amber-600 transition duration-200"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p class="text-sm text-gray-700 mt-3 line-clamp-2">
|
|
Criminal case involving drug trafficking under Section 39B of
|
|
the Dangerous Drugs Act 1952.
|
|
</p>
|
|
<div class="mt-3 text-xs text-gray-500">
|
|
Last accessed: 2 days ago
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stat Card -->
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Documents</div>
|
|
<div class="stat-value">1,234</div>
|
|
<div class="stat-change stat-change-positive">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4 mr-1"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
12% from last month
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Badges -->
|
|
<section id="badges" class="mb-10">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Badges</h2>
|
|
|
|
<h3 class="text-lg font-medium mb-3">Badge Variants</h3>
|
|
<div class="flex flex-wrap gap-2 border-b border-gray-200 pb-6 mb-6">
|
|
<span class="badge badge-primary">Primary</span>
|
|
<span class="badge badge-secondary">Secondary</span>
|
|
<span class="badge badge-success">Success</span>
|
|
<span class="badge badge-warning">Warning</span>
|
|
<span class="badge badge-error">Error</span>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-medium mb-3">Outline Badges</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="badge badge-outline text-primary">Primary</span>
|
|
<span class="badge badge-outline text-secondary">Secondary</span>
|
|
<span class="badge badge-outline text-success">Success</span>
|
|
<span class="badge badge-outline text-warning">Warning</span>
|
|
<span class="badge badge-outline text-error">Error</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Alerts & Toasts -->
|
|
<section id="alerts" class="mb-10">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Alerts & Toasts</h2>
|
|
|
|
<h3 class="text-lg font-medium mb-3">Toast Notifications</h3>
|
|
<div class="flex flex-wrap gap-2 mb-6">
|
|
<button class="btn btn-outline" onclick="showToast('default')">
|
|
Default Toast
|
|
</button>
|
|
<button
|
|
class="btn btn-outline text-success"
|
|
onclick="showToast('success')"
|
|
>
|
|
Success Toast
|
|
</button>
|
|
<button
|
|
class="btn btn-outline text-warning"
|
|
onclick="showToast('warning')"
|
|
>
|
|
Warning Toast
|
|
</button>
|
|
<button
|
|
class="btn btn-outline text-error"
|
|
onclick="showToast('error')"
|
|
>
|
|
Error Toast
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Toast Container (for demonstration) -->
|
|
<div class="toast-container hidden" id="toastDemo">
|
|
<div class="toast">This is a default toast notification</div>
|
|
<div class="toast toast-success">
|
|
This is a success toast notification
|
|
</div>
|
|
<div class="toast toast-warning">
|
|
This is a warning toast notification
|
|
</div>
|
|
<div class="toast toast-error">
|
|
This is an error toast notification
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tabs -->
|
|
<section id="tabs" class="mb-10">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Tabs</h2>
|
|
|
|
<div class="tabs">
|
|
<div class="tab tab-active" data-tab="tab1">All Documents</div>
|
|
<div class="tab" data-tab="tab2">LKK Reports</div>
|
|
<div class="tab" data-tab="tab3">Legal Cases</div>
|
|
<div class="tab" data-tab="tab4">Criminal Cases</div>
|
|
</div>
|
|
|
|
<div class="tab-content tab-content-active" id="tab1">
|
|
<p class="py-4">This is the content for All Documents tab.</p>
|
|
</div>
|
|
<div class="tab-content" id="tab2">
|
|
<p class="py-4">This is the content for LKK Reports tab.</p>
|
|
</div>
|
|
<div class="tab-content" id="tab3">
|
|
<p class="py-4">This is the content for Legal Cases tab.</p>
|
|
</div>
|
|
<div class="tab-content" id="tab4">
|
|
<p class="py-4">This is the content for Criminal Cases tab.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tooltips & Dropdowns -->
|
|
<section id="tooltips" class="mb-10">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Tooltips & Dropdowns</h2>
|
|
|
|
<h3 class="text-lg font-medium mb-3">Tooltips</h3>
|
|
<div class="flex flex-wrap gap-4 border-b border-gray-200 pb-6 mb-6">
|
|
<div class="tooltip">
|
|
<button class="btn btn-outline">Hover Me</button>
|
|
<span class="tooltip-text">This is a tooltip</span>
|
|
</div>
|
|
|
|
<div class="tooltip">
|
|
<span class="text-blue-600 underline cursor-help"
|
|
>What is LKK?</span
|
|
>
|
|
<span class="tooltip-text"
|
|
>Laporan Keputusan Kes (Case Decision Reports)</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-medium mb-3">Dropdowns</h3>
|
|
<div class="flex flex-wrap gap-4">
|
|
<div class="dropdown">
|
|
<button class="btn btn-outline dropdown-toggle">
|
|
Click to Open
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<a href="#" class="dropdown-item">Option 1</a>
|
|
<a href="#" class="dropdown-item">Option 2</a>
|
|
<a href="#" class="dropdown-item">Option 3</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-primary dropdown-toggle flex items-center gap-2"
|
|
>
|
|
<span>User Actions</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<a href="#" class="dropdown-item">Profile</a>
|
|
<a href="#" class="dropdown-item">Settings</a>
|
|
<a href="#" class="dropdown-item">Logout</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Animations -->
|
|
<section id="animations" class="mb-10">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Animations</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h3 class="text-lg font-medium mb-3">Fade Animations</h3>
|
|
<div class="space-y-4">
|
|
<button class="btn btn-primary animate-fade-in">Fade In</button>
|
|
<button class="btn btn-primary animate-fade-in-up">
|
|
Fade In Up
|
|
</button>
|
|
<button class="btn btn-primary animate-fade-in-down">
|
|
Fade In Down
|
|
</button>
|
|
<button class="btn btn-primary animate-fade-in-left">
|
|
Fade In Left
|
|
</button>
|
|
<button class="btn btn-primary animate-fade-in-right">
|
|
Fade In Right
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-medium mb-3">Other Animations</h3>
|
|
<div class="space-y-4">
|
|
<button class="btn btn-primary animate-slide-up">
|
|
Slide Up
|
|
</button>
|
|
<div
|
|
class="animate-pulse bg-blue-200 text-blue-800 p-3 rounded"
|
|
>
|
|
Pulse Animation
|
|
</div>
|
|
<div
|
|
class="animate-spin h-8 w-8 border-4 border-blue-600 border-t-transparent rounded-full"
|
|
></div>
|
|
<div
|
|
class="animate-bounce h-8 w-8 bg-blue-600 rounded-full"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-blue-900 text-white py-8 mt-10">
|
|
<div class="container mx-auto px-4">
|
|
<p class="text-center text-sm text-blue-200">
|
|
AGC Design System - Attorney General's Chambers Document Search
|
|
Interface
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Demo script for the component library -->
|
|
<script>
|
|
// Tabs functionality
|
|
document.querySelectorAll(".tab").forEach((tab) => {
|
|
tab.addEventListener("click", function () {
|
|
// Remove active class from all tabs
|
|
document
|
|
.querySelectorAll(".tab")
|
|
.forEach((t) => t.classList.remove("tab-active"));
|
|
|
|
// Add active class to clicked tab
|
|
this.classList.add("tab-active");
|
|
|
|
// Hide all tab content
|
|
document.querySelectorAll(".tab-content").forEach((content) => {
|
|
content.classList.remove("tab-content-active");
|
|
});
|
|
|
|
// Show corresponding tab content
|
|
const tabId = this.getAttribute("data-tab");
|
|
document.getElementById(tabId).classList.add("tab-content-active");
|
|
});
|
|
});
|
|
|
|
// Toast demo functionality
|
|
function showToast(type) {
|
|
const toastDemo = document.getElementById("toastDemo");
|
|
toastDemo.classList.remove("hidden");
|
|
|
|
setTimeout(() => {
|
|
toastDemo.classList.add("hidden");
|
|
}, 3000);
|
|
}
|
|
|
|
// Add style for demo color classes
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const style = document.createElement("style");
|
|
style.textContent = `
|
|
.bg-navy-900 { background-color: #1e2d4c; }
|
|
.bg-navy-700 { background-color: #2c4272; }
|
|
.bg-navy-500 { background-color: #4065a2; }
|
|
.bg-navy-300 { background-color: #8eaed3; }
|
|
.bg-navy-100 { background-color: #dbe6f3; }
|
|
|
|
.bg-gold-900 { background-color: #653310; }
|
|
.bg-gold-700 { background-color: #965709; }
|
|
.bg-gold-500 { background-color: #e29807; }
|
|
.bg-gold-300 { background-color: #f8cb47; }
|
|
.bg-gold-100 { background-color: #fdf1c7; }
|
|
|
|
.bg-success { background-color: #059669; }
|
|
.bg-warning { background-color: #d97706; }
|
|
.bg-error { background-color: #dc2626; }
|
|
`;
|
|
document.head.appendChild(style);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|