first commit
This commit is contained in:
bagus-arie05
805
pages/Home.vue
Normal file
805
pages/Home.vue
Normal file
@@ -0,0 +1,805 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user