805 lines
21 KiB
Vue
805 lines
21 KiB
Vue
<template>
|
|
<div class="main-container">
|
|
<div class="content-container">
|
|
<div class="header">
|
|
<div class="logo-group">
|
|
<div class="logo-circle bg-green">
|
|
<svg class="logo-icon text-green" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="logo-circle bg-pink">
|
|
<span class="logo-text text-pink">RSSA</span>
|
|
</div>
|
|
<div class="logo-circle bg-red">
|
|
<span class="logo-text text-red">QRIS</span>
|
|
</div>
|
|
</div>
|
|
<h1 class="main-title">
|
|
<span class="text-orange">With Love</span> We Serve
|
|
</h1>
|
|
<p class="subtitle">Kami Menyediakan Layanan Medis yang Dapat Anda Percayai</p>
|
|
<p class="institution-name">RSU Saiful Anwar Malang</p>
|
|
</div>
|
|
<div class="status-card-container">
|
|
<div class="status-card">
|
|
<div class="status-header">
|
|
<div class="status-info">
|
|
<div :class="loketStatusClass" class="status-indicator"></div>
|
|
<h2 class="status-title">
|
|
Status Loket: {{ loket.name || 'Mengidentifikasi...' }}
|
|
</h2>
|
|
</div>
|
|
<button @click="refreshLoketInfo" :disabled="loading" class="refresh-button">
|
|
<svg class="refresh-icon" :class="{ 'animate-spin': loading }" fill="none" viewBox="0 0 24 24">
|
|
<circle v-if="loading" class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path v-if="loading" class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
<path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="status-grid">
|
|
<div class="status-item">
|
|
<span class="status-label">IP Address:</span>
|
|
<span class="status-value">{{ loket.ipAddress || 'Detecting...' }}</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Status Koneksi:</span>
|
|
<span :class="connectionStatusClass" class="status-value-color">
|
|
{{ connectionStatus }}
|
|
</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Backend:</span>
|
|
<span :class="backendStatusClass" class="status-value-color">
|
|
{{ backendStatus }}
|
|
</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">QRIS Ready:</span>
|
|
<span :class="qrisStatusClass" class="status-value-color">
|
|
{{ qrisStatus }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main-content-container">
|
|
<div v-if="!isSystemReady" class="standby-card">
|
|
<div class="standby-icon-circle">
|
|
<svg class="standby-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h2 class="standby-title">Sistem Standby</h2>
|
|
<p class="standby-message">Menunggu setup pembayaran dari backend...</p>
|
|
<div class="standby-status-list">
|
|
<div class="status-item-list">
|
|
<div :class="loket.ipAddress ? 'bg-green' : 'bg-gray'" class="status-indicator-sm"></div>
|
|
<span class="status-text-sm">Identifikasi Loket</span>
|
|
</div>
|
|
<div class="status-item-list">
|
|
<div :class="connectionStatus === 'Terhubung' ? 'bg-green' : 'bg-gray'" class="status-indicator-sm"></div>
|
|
<span class="status-text-sm">Koneksi Backend</span>
|
|
</div>
|
|
<div class="status-item-list">
|
|
<div :class="qrisStatus === 'Siap' ? 'bg-green' : 'bg-gray'" class="status-indicator-sm"></div>
|
|
<span class="status-text-sm">Integrasi QRIS</span>
|
|
</div>
|
|
</div>
|
|
<button @click="checkSystemStatus" :disabled="loading" class="check-status-button">
|
|
<span v-if="loading">Checking...</span>
|
|
<span v-else>Periksa Status</span>
|
|
</button>
|
|
</div>
|
|
<div v-else class="payment-form-card">
|
|
<h2 class="payment-form-title">
|
|
Setup Pembayaran QRIS
|
|
</h2>
|
|
<div v-if="error" class="error-message">
|
|
{{ error }}
|
|
</div>
|
|
<form @submit.prevent="submitPayment">
|
|
<div class="form-group">
|
|
<label class="form-label">Nama Pasien *</label>
|
|
<input
|
|
v-model="form.patientName"
|
|
type="text"
|
|
required
|
|
class="form-input"
|
|
placeholder="Masukkan nama pasien"
|
|
>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Nominal Pembayaran *</label>
|
|
<div class="relative-input">
|
|
<span class="currency-symbol">Rp</span>
|
|
<input
|
|
v-model="form.amount"
|
|
type="number"
|
|
required
|
|
min="1000"
|
|
step="1000"
|
|
class="form-input-amount"
|
|
placeholder="0"
|
|
>
|
|
</div>
|
|
<p class="input-hint">Minimum: Rp 1.000</p>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Keterangan Pembayaran</label>
|
|
<textarea
|
|
v-model="form.description"
|
|
rows="3"
|
|
class="form-textarea"
|
|
placeholder="Pembayaran layanan kesehatan, obat, konsultasi, dll..."
|
|
></textarea>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
:disabled="loading || !form.patientName || !form.amount || form.amount < 1000"
|
|
class="submit-button"
|
|
>
|
|
<span v-if="loading" class="submit-loading">
|
|
<svg class="spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Membuat QR Code...
|
|
</span>
|
|
<span v-else class="submit-text">
|
|
<svg class="submit-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11a9 9 0 11-18 0 9 9 0 0118 0zm-9 0a1 1 0 100-2 1 1 0 000 2z"></path>
|
|
</svg>
|
|
Buat QR Code Pembayaran
|
|
</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="footer-container">
|
|
<div class="footer-card">
|
|
<h3 class="footer-title">Hubungi Kami</h3>
|
|
<div class="footer-grid">
|
|
<div class="contact-item">
|
|
<svg class="contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
<p class="contact-text">+62 815-5560-6668</p>
|
|
</div>
|
|
<div class="contact-item">
|
|
<svg class="contact-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9m0 9c-5 0-9-4-9-9s4-9 9-9"></path>
|
|
</svg>
|
|
<p class="contact-text">rsusaifulanwar.jatimprov.go.id</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Meta tags
|
|
useSeoMeta({
|
|
title: 'QRIS Payment System - RSU Saiful Anwar',
|
|
description: 'Sistem Pembayaran QRIS RSU Saiful Anwar Malang'
|
|
})
|
|
|
|
// Composables
|
|
const payment = usePayment()
|
|
const router = useRouter()
|
|
|
|
// Destructure from payment store
|
|
const {
|
|
loket,
|
|
loading,
|
|
error,
|
|
isSystemReady,
|
|
fetchLoketInfo,
|
|
generatePayment,
|
|
formatCurrency
|
|
} = payment
|
|
|
|
// Local state
|
|
const form = ref({
|
|
patientName: '',
|
|
amount: '',
|
|
description: ''
|
|
})
|
|
|
|
// System status check interval
|
|
let systemStatusCheck: NodeJS.Timeout | null = null
|
|
|
|
// Computed properties
|
|
const loketStatusClass = computed(() => {
|
|
return loket.value.id ? 'bg-green animate-pulse' : 'bg-gray'
|
|
})
|
|
|
|
const connectionStatus = computed(() => {
|
|
return loket.value.id ? 'Terhubung' : 'Menghubungkan...'
|
|
})
|
|
const connectionStatusClass = computed(() => {
|
|
return loket.value.id ? 'text-green' : 'text-yellow'
|
|
})
|
|
|
|
const backendStatus = computed(() => {
|
|
return loket.value.id ? 'Online' : 'Checking...'
|
|
})
|
|
const backendStatusClass = computed(() => {
|
|
return loket.value.id ? 'text-green' : 'text-yellow'
|
|
})
|
|
|
|
const qrisStatus = computed(() => {
|
|
return loket.value.id ? 'Siap' : 'Standby'
|
|
})
|
|
const qrisStatusClass = computed(() => {
|
|
return loket.value.id ? 'text-green' : 'text-gray'
|
|
})
|
|
|
|
// Methods
|
|
const initializeSystem = async () => {
|
|
try {
|
|
await fetchLoketInfo()
|
|
} catch (error) {
|
|
console.error('Failed to initialize system:', error)
|
|
}
|
|
}
|
|
|
|
const refreshLoketInfo = async () => {
|
|
try {
|
|
await fetchLoketInfo()
|
|
} catch (error) {
|
|
console.error('Failed to refresh loket info:', error)
|
|
}
|
|
}
|
|
|
|
const checkSystemStatus = async () => {
|
|
await refreshLoketInfo()
|
|
}
|
|
|
|
const submitPayment = async () => {
|
|
if (!form.value.patientName || !form.value.amount || Number(form.value.amount) < 1000) {
|
|
return
|
|
}
|
|
try {
|
|
const paymentData = {
|
|
patient_name: form.value.patientName,
|
|
amount: Number(form.value.amount),
|
|
description: form.value.description || `Pembayaran layanan kesehatan - ${form.value.patientName}`,
|
|
loket_id: loket.value.id!,
|
|
loket_ip: loket.value.ipAddress
|
|
}
|
|
await generatePayment(paymentData)
|
|
|
|
// Reset form
|
|
form.value = {
|
|
patientName: '',
|
|
amount: '',
|
|
description: ''
|
|
}
|
|
|
|
// Navigate to QR code page
|
|
await router.push('/qr-code')
|
|
} catch (error) {
|
|
console.error('Payment generation failed:', error)
|
|
}
|
|
}
|
|
|
|
// Lifecycle
|
|
onMounted(async () => {
|
|
await initializeSystem()
|
|
|
|
// Auto check system status setiap 30 detik
|
|
systemStatusCheck = setInterval(() => {
|
|
checkSystemStatus()
|
|
}, 30000)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (systemStatusCheck) {
|
|
clearInterval(systemStatusCheck)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/*
|
|
=====================================
|
|
General Styles
|
|
=====================================
|
|
*/
|
|
.main-container {
|
|
min-height: 100vh;
|
|
background-color: #fffaf0; /* from-orange-50 */
|
|
background-image: linear-gradient(to bottom right, #fffaf0, #fff7ed); /* to-orange-100 */
|
|
}
|
|
|
|
.content-container {
|
|
max-width: 960px; /* equivalent to container mx-auto */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 32px 16px; /* px-4 py-8 */
|
|
}
|
|
|
|
/*
|
|
=====================================
|
|
Header
|
|
=====================================
|
|
*/
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 32px; /* mb-8 */
|
|
}
|
|
|
|
.logo-group {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 24px; /* mb-6 */
|
|
gap: 24px; /* space-x-6 */
|
|
}
|
|
|
|
.logo-circle {
|
|
width: 64px; /* w-16 */
|
|
height: 64px; /* h-16 */
|
|
border-radius: 9999px; /* rounded-full */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 32px; /* w-8 */
|
|
height: 32px; /* h-8 */
|
|
}
|
|
|
|
.logo-text {
|
|
font-weight: bold; /* font-bold */
|
|
font-size: 12px; /* text-xs */
|
|
}
|
|
|
|
.bg-green {
|
|
background-color: #d1fae5; /* bg-green-100 */
|
|
}
|
|
|
|
.bg-pink {
|
|
background-color: #fce7f3; /* bg-pink-100 */
|
|
}
|
|
|
|
.bg-red {
|
|
background-color: #fee2e2; /* bg-red-100 */
|
|
}
|
|
|
|
.text-green {
|
|
color: #059669; /* text-green-600 */
|
|
}
|
|
|
|
.text-pink {
|
|
color: #db2777; /* text-pink-600 */
|
|
}
|
|
|
|
.text-red {
|
|
color: #dc2626; /* text-red-600 */
|
|
}
|
|
|
|
.main-title {
|
|
font-size: 36px; /* text-4xl */
|
|
font-weight: bold; /* font-bold */
|
|
color: #1f2937; /* text-gray-800 */
|
|
margin-bottom: 8px; /* mb-2 */
|
|
}
|
|
|
|
.text-orange {
|
|
color: #f97316; /* text-orange-500 */
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 18px; /* text-lg */
|
|
color: #4b5563; /* text-gray-600 */
|
|
margin-bottom: 16px; /* mb-4 */
|
|
}
|
|
|
|
.institution-name {
|
|
font-size: 14px; /* text-sm */
|
|
color: #6b7280; /* text-gray-500 */
|
|
}
|
|
|
|
/*
|
|
=====================================
|
|
Status Card
|
|
=====================================
|
|
*/
|
|
.status-card-container {
|
|
max-width: 768px; /* max-w-2xl */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 32px; /* mb-8 */
|
|
}
|
|
|
|
.status-card {
|
|
background-color: #ffffff; /* bg-white */
|
|
border-radius: 8px; /* rounded-lg */
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-lg */
|
|
padding: 24px; /* p-6 */
|
|
}
|
|
|
|
.status-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px; /* mb-4 */
|
|
}
|
|
|
|
.status-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px; /* space-x-3 */
|
|
}
|
|
|
|
.status-indicator {
|
|
width: 16px; /* w-4 */
|
|
height: 16px; /* h-4 */
|
|
border-radius: 9999px; /* rounded-full */
|
|
}
|
|
|
|
.bg-green {
|
|
background-color: #22c55e;
|
|
}
|
|
|
|
.bg-gray {
|
|
background-color: #9ca3af;
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: .5; }
|
|
}
|
|
|
|
.status-title {
|
|
font-size: 20px; /* text-xl */
|
|
font-weight: 600; /* font-semibold */
|
|
color: #1f2937; /* text-gray-800 */
|
|
}
|
|
|
|
.refresh-button {
|
|
color: #2563eb; /* text-blue-600 */
|
|
}
|
|
|
|
.refresh-button:hover {
|
|
color: #1e40af; /* hover:text-blue-800 */
|
|
}
|
|
|
|
.refresh-icon {
|
|
width: 20px; /* w-5 */
|
|
height: 20px; /* h-5 */
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.status-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px; /* gap-4 */
|
|
font-size: 14px; /* text-sm */
|
|
}
|
|
|
|
.status-label {
|
|
color: #4b5563; /* text-gray-600 */
|
|
}
|
|
|
|
.status-value {
|
|
font-family: monospace; /* font-mono */
|
|
margin-left: 8px; /* ml-2 */
|
|
}
|
|
|
|
.status-value-color {
|
|
margin-left: 8px; /* ml-2 */
|
|
font-weight: 500; /* font-medium */
|
|
}
|
|
|
|
.text-green {
|
|
color: #22c55e; /* text-green-600 */
|
|
}
|
|
|
|
.text-yellow {
|
|
color: #ca8a04; /* text-yellow-600 */
|
|
}
|
|
|
|
.text-gray {
|
|
color: #6b7280; /* text-gray-500 */
|
|
}
|
|
|
|
/*
|
|
=====================================
|
|
Standby & Payment Form
|
|
=====================================
|
|
*/
|
|
.main-content-container {
|
|
max-width: 512px; /* max-w-md */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.standby-card, .payment-form-card {
|
|
background-color: #ffffff; /* bg-white */
|
|
border-radius: 8px; /* rounded-lg */
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-lg */
|
|
padding: 32px; /* p-8 */
|
|
text-align: center;
|
|
}
|
|
|
|
.standby-icon-circle {
|
|
width: 80px; /* w-20 */
|
|
height: 80px; /* h-20 */
|
|
background-color: #ffedd5; /* bg-orange-100 */
|
|
border-radius: 9999px; /* rounded-full */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 24px; /* mb-6 */
|
|
}
|
|
|
|
.standby-icon {
|
|
width: 40px; /* w-10 */
|
|
height: 40px; /* h-10 */
|
|
color: #ea580c; /* text-orange-600 */
|
|
}
|
|
|
|
.standby-title {
|
|
font-size: 24px; /* text-2xl */
|
|
font-weight: bold; /* font-bold */
|
|
color: #1f2937; /* text-gray-800 */
|
|
margin-bottom: 16px; /* mb-4 */
|
|
}
|
|
|
|
.standby-message {
|
|
color: #4b5563; /* text-gray-600 */
|
|
margin-bottom: 24px; /* mb-6 */
|
|
}
|
|
|
|
.standby-status-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px; /* space-y-3 */
|
|
text-align: left;
|
|
}
|
|
|
|
.status-item-list {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px; /* space-x-3 */
|
|
}
|
|
|
|
.status-indicator-sm {
|
|
width: 12px; /* w-3 */
|
|
height: 12px; /* h-3 */
|
|
border-radius: 9999px; /* rounded-full */
|
|
}
|
|
|
|
.status-text-sm {
|
|
font-size: 14px; /* text-sm */
|
|
}
|
|
|
|
.check-status-button {
|
|
margin-top: 24px; /* mt-6 */
|
|
background-color: #ea580c; /* bg-orange-600 */
|
|
color: white;
|
|
font-weight: 500; /* font-medium */
|
|
padding: 8px 24px; /* py-2 px-6 */
|
|
border-radius: 8px; /* rounded-lg */
|
|
transition-property: background-color;
|
|
transition-duration: 200ms;
|
|
}
|
|
|
|
.check-status-button:hover {
|
|
background-color: #c2410c; /* hover:bg-orange-700 */
|
|
}
|
|
|
|
.check-status-button:disabled {
|
|
background-color: #9ca3af; /* disabled:bg-gray-400 */
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.payment-form-card {
|
|
padding: 24px; /* p-6 */
|
|
}
|
|
|
|
.payment-form-title {
|
|
font-size: 20px; /* text-xl */
|
|
font-weight: 600; /* font-semibold */
|
|
color: #1f2937; /* text-gray-800 */
|
|
margin-bottom: 24px; /* mb-6 */
|
|
text-align: center;
|
|
}
|
|
|
|
.error-message {
|
|
margin-bottom: 16px; /* mb-4 */
|
|
padding: 12px; /* p-3 */
|
|
background-color: #fef2f2; /* bg-red-100 */
|
|
border: 1px solid #fca5a5; /* border-red-400 */
|
|
color: #b91c1c; /* text-red-700 */
|
|
border-radius: 4px; /* rounded */
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px; /* mb-4 */
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
color: #374151; /* text-gray-700 */
|
|
font-size: 14px; /* text-sm */
|
|
font-weight: 500; /* font-medium */
|
|
margin-bottom: 8px; /* mb-2 */
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 8px 12px; /* px-3 py-2 */
|
|
border: 1px solid #d1d5db; /* border-gray-300 */
|
|
border-radius: 8px; /* rounded-lg */
|
|
outline: none;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px #f97316; /* focus:ring-2 focus:ring-orange-500 */
|
|
}
|
|
|
|
.relative-input {
|
|
position: relative;
|
|
}
|
|
|
|
.currency-symbol {
|
|
position: absolute;
|
|
left: 12px; /* left-3 */
|
|
top: 8px; /* top-2 */
|
|
color: #6b7280; /* text-gray-500 */
|
|
}
|
|
|
|
.form-input-amount {
|
|
width: 100%;
|
|
padding: 8px 12px 8px 40px; /* pl-10 pr-3 py-2 */
|
|
border: 1px solid #d1d5db; /* border-gray-300 */
|
|
border-radius: 8px; /* rounded-lg */
|
|
outline: none;
|
|
}
|
|
|
|
.form-input-amount:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px #f97316; /* focus:ring-2 focus:ring-orange-500 */
|
|
}
|
|
|
|
.input-hint {
|
|
font-size: 12px; /* text-xs */
|
|
color: #6b7280; /* text-gray-500 */
|
|
margin-top: 4px; /* mt-1 */
|
|
}
|
|
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: 8px 12px; /* px-3 py-2 */
|
|
border: 1px solid #d1d5db; /* border-gray-300 */
|
|
border-radius: 8px; /* rounded-lg */
|
|
outline: none;
|
|
}
|
|
|
|
.form-textarea:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px #f97316; /* focus:ring-2 focus:ring-orange-500 */
|
|
}
|
|
|
|
.submit-button {
|
|
width: 100%;
|
|
background-color: #ea580c; /* bg-orange-600 */
|
|
color: white;
|
|
font-weight: 500; /* font-medium */
|
|
padding: 12px 16px; /* py-3 px-4 */
|
|
border-radius: 8px; /* rounded-lg */
|
|
transition-property: background-color;
|
|
transition-duration: 200ms;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.submit-button:hover {
|
|
background-color: #c2410c; /* hover:bg-orange-700 */
|
|
}
|
|
|
|
.submit-button:disabled {
|
|
background-color: #9ca3af; /* disabled:bg-gray-400 */
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.submit-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.spinner {
|
|
animation: spin 1s linear infinite;
|
|
width: 20px; /* w-5 */
|
|
height: 20px; /* h-5 */
|
|
margin-right: 12px; /* mr-3 */
|
|
margin-left: -4px; /* -ml-1 */
|
|
}
|
|
|
|
.submit-text {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.submit-icon {
|
|
width: 20px; /* w-5 */
|
|
height: 20px; /* h-5 */
|
|
margin-right: 8px; /* mr-2 */
|
|
}
|
|
|
|
/*
|
|
=====================================
|
|
Footer
|
|
=====================================
|
|
*/
|
|
.footer-container {
|
|
max-width: 768px; /* max-w-2xl */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 32px; /* mt-8 */
|
|
}
|
|
|
|
.footer-card {
|
|
background-color: #ffffff; /* bg-white */
|
|
border-radius: 8px; /* rounded-lg */
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow */
|
|
padding: 16px; /* p-4 */
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-title {
|
|
font-weight: bold; /* font-bold */
|
|
color: #1f2937; /* text-gray-800 */
|
|
margin-bottom: 8px; /* mb-2 */
|
|
}
|
|
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px; /* gap-4 */
|
|
font-size: 14px; /* text-sm */
|
|
}
|
|
|
|
.contact-item {
|
|
background-color: #fff7ed; /* bg-orange-100 */
|
|
border-radius: 8px; /* rounded-lg */
|
|
padding: 12px; /* p-3 */
|
|
}
|
|
|
|
.contact-icon {
|
|
width: 20px; /* w-5 */
|
|
height: 20px; /* h-5 */
|
|
color: #ea580c; /* text-orange-600 */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 4px; /* mb-1 */
|
|
}
|
|
|
|
.contact-text {
|
|
font-weight: 500; /* font-medium */
|
|
}
|
|
</style> |