truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance bank accounts template with new styling, localization support, and improved layout for better user experience

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-21 00:36:19 +03:00
parent 0ca112b28d
commit dbb9853066
1 changed files with 321 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/templates/corporate/bank-accounts.blade.php
+321 -50
View File
@@ -2,10 +2,222 @@
@section('content')
<section class="wrapper bg-light">
@php
$accounts = $page->data['bank_accounts'] ?? [];
$currencySymbols = [
'TRY' => '₺',
'USD' => '$',
'EUR' => '€',
'GBP' => '£',
];
@endphp
<style>
.bank-accounts-section {
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40%);
}
.bank-account-card {
background: #ffffff;
border-radius: 1.25rem;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bank-account-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
border-color: #cbd5e1;
}
.bank-account-card__header {
position: relative;
padding: 2rem 1.5rem 1.75rem;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-bottom: 1px solid #e2e8f0;
text-align: center;
min-height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.bank-account-card__logo-wrap {
width: 100%;
max-width: 220px;
height: 88px;
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1rem;
background: #ffffff;
border-radius: 1rem;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
margin: 0 auto;
}
.bank-account-card__logo-wrap img {
max-width: 100%;
max-height: 72px;
width: auto;
height: auto;
object-fit: contain;
}
.bank-account-card__logo-placeholder {
width: 72px;
height: 72px;
border-radius: 1rem;
background: rgba(var(--bs-primary-rgb), 0.1);
color: var(--bs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.bank-account-card__currency {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.35rem 0.75rem;
border-radius: 9999px;
background: #ffffff;
border: 1px solid #e2e8f0;
color: var(--bs-primary);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.bank-account-card__body {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.bank-account-card__title {
font-size: 1.25rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 0.25rem;
line-height: 1.3;
}
.bank-account-card__branch {
font-size: 0.875rem;
color: #64748b;
margin-bottom: 1.25rem;
}
.bank-account-card__field {
margin-bottom: 1rem;
}
.bank-account-card__field:last-of-type {
margin-bottom: 0;
}
.bank-account-card__label {
display: block;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 0.35rem;
}
.bank-account-card__value {
font-size: 0.9375rem;
font-weight: 600;
color: #1e293b;
line-height: 1.4;
}
.bank-account-card__iban-box {
margin-top: auto;
padding-top: 1rem;
border-top: 1px dashed #e2e8f0;
}
.bank-account-card__iban {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.9375rem;
font-weight: 700;
color: var(--bs-primary);
letter-spacing: 0.02em;
word-break: break-all;
line-height: 1.5;
padding: 0.75rem 1rem;
background: #f8fafc;
border-radius: 0.75rem;
border: 1px solid #e2e8f0;
user-select: all;
}
.bank-account-card__copy-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.5rem;
padding: 0;
border: none;
background: none;
font-size: 0.8125rem;
font-weight: 600;
color: var(--bs-primary);
cursor: pointer;
transition: opacity 0.2s;
}
.bank-account-card__copy-btn:hover {
opacity: 0.8;
text-decoration: underline;
}
.bank-account-card__copy-btn.is-copied {
color: #16a34a;
}
.bank-account-card__footer-bar {
height: 4px;
background: linear-gradient(90deg, var(--bs-primary), #3b82f6);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.bank-account-card:hover .bank-account-card__footer-bar {
transform: scaleX(1);
}
.bank-accounts-empty {
padding: 3rem 2rem;
background: #ffffff;
border-radius: 1.25rem;
border: 1px dashed #cbd5e1;
text-align: center;
max-width: 420px;
margin: 0 auto;
}
.bank-accounts-tabs {
display: inline-flex;
gap: 0;
border-bottom: 2px solid #e2e8f0;
margin-bottom: 2.5rem;
}
.bank-accounts-tabs a,
.bank-accounts-tabs span {
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
color: #64748b;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: color 0.2s, border-color 0.2s;
}
.bank-accounts-tabs a:hover {
color: #334155;
}
.bank-accounts-tabs .is-active {
color: var(--bs-primary);
border-bottom-color: var(--bs-primary);
}
</style>
<section class="wrapper bank-accounts-section">
<div class="container pt-14 pb-14 xl:pt-20 xl:pb-20 lg:pt-20 lg:pb-20 md:pt-20 md:pb-20">
<div class="row text-center mb-10">
<div class="row text-center mb-8">
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
<h1 class="display-1 mb-3">{!! $page->title !!}</h1>
@if($page->excerpt)
@@ -14,80 +226,139 @@
</div>
</div>
<div class="row gy-6">
@php
$accounts = $page->data['bank_accounts'] ?? [];
@endphp
<div class="text-center">
<nav class="bank-accounts-tabs" aria-label="{!! t('Ödeme yöntemi') !!}">
<a href="{{ route('page.show', ['slug' => 'online-odeme']) }}">{!! t('Kart ile Ödeme') !!}</a>
<span class="is-active">{!! t('Havale / EFT (IBAN)') !!}</span>
</nav>
</div>
<div class="row gy-6 justify-content-center">
@forelse($accounts as $index => $account)
@php
$currency = $account['currency'] ?? 'TRY';
$currencyLabel = ($currencySymbols[$currency] ?? '') . ' ' . $currency;
@endphp
<div class="col-md-6 col-xl-4">
<article class="bank-account-card">
<div class="bank-account-card__header">
<span class="bank-account-card__currency">{{ $currencyLabel }}</span>
@forelse($accounts as $account)
<div class="col-md-6 col-lg-4">
<div class="card shadow-lg lift h-100 border-0 rounded-xl overflow-hidden group hover:shadow-2xl transition-all duration-300">
<div class="card-body p-8">
<div class="flex items-center justify-between mb-6">
@if(!empty($account['logo']))
<div class="bg-gray-50 flex items-center justify-center p-2 rounded-lg" style="width: 120px; height: 60px;">
<img src="{{ asset('storage/' . $account['logo']) }}" class="img-fluid" style="max-height: 100%; max-width: 100%;" alt="{{ $account['bank_name'] }}" loading="lazy">
<div class="bank-account-card__logo-wrap">
<img
src="{{ asset('storage/' . $account['logo']) }}"
alt="{{ $account['bank_name'] }}"
loading="lazy"
>
</div>
@else
<div class="bg-primary/10 text-primary w-16 h-16 rounded-lg flex items-center justify-center text-2xl">
<div class="bank-account-card__logo-placeholder" aria-hidden="true">
<i class="uil uil-university"></i>
</div>
@endif
<span class="badge bg-pale-primary text-primary rounded-pill px-3 py-1 text-sm font-semibold">
{{ $account['currency'] ?? 'TRY' }}
</span>
</div>
<h3 class="h4 mb-1 text-dark group-hover:text-primary transition-colors">{{ $account['bank_name'] }}</h3>
@if(!empty($account['branch_name']))
<p class="text-muted text-sm mb-4">{{ $account['branch_name'] }}</p>
@else
<div class="mb-4"></div>
@endif
<div class="bank-account-card__body">
<h2 class="bank-account-card__title">{{ $account['bank_name'] }}</h2>
@if(!empty($account['branch_name']))
<p class="bank-account-card__branch">{{ $account['branch_name'] }}</p>
@endif
<div class="space-y-3">
<div>
<label class="text-xs uppercase text-gray-500 font-bold tracking-wider block mb-1">HESAP SAHİBİ</label>
<div class="text-dark font-medium">{{ $account['account_holder'] }}</div>
<div class="bank-account-card__field">
<span class="bank-account-card__label">{!! t('Hesap Sahibi') !!}</span>
<div class="bank-account-card__value">{{ $account['account_holder'] }}</div>
</div>
<div class="pt-2 border-t border-gray-100">
<label class="text-xs uppercase text-gray-500 font-bold tracking-wider block mb-1">IBAN</label>
<div class="font-mono text-lg text-primary font-bold tracking-tight break-all select-all selection:bg-primary/20 cursor-text">
{{ $account['iban'] }}
</div>
<button onclick="navigator.clipboard.writeText('{{ $account['iban'] }}'); alert('IBAN kopyalandı!');" class="text-xs text-primary mt-1 hover:underline flex items-center gap-1 cursor-pointer">
<i class="uil uil-copy"></i> Kopyala
<div class="bank-account-card__iban-box">
<span class="bank-account-card__label">IBAN</span>
<div class="bank-account-card__iban" id="iban-{{ $index }}">{{ $account['iban'] }}</div>
<button
type="button"
class="bank-account-card__copy-btn"
data-iban="{{ $account['iban'] }}"
data-copy-label="{!! t('Kopyala') !!}"
data-copied-label="{!! t('Kopyalandı') !!}"
aria-label="{!! t('IBAN kopyala') !!}"
>
<i class="uil uil-copy"></i>
<span>{!! t('Kopyala') !!}</span>
</button>
</div>
</div>
</div>
<div class="h-1 w-full bg-gradient-to-r from-primary to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
<div class="bank-account-card__footer-bar" aria-hidden="true"></div>
</article>
</div>
</div>
@empty
<div class="col-12 text-center py-10">
<div class="bg-white p-10 rounded-xl shadow-sm border border-gray-100 inline-block">
<i class="uil uil-wallet text-6xl text-gray-300 mb-4 block"></i>
<h3 class="h4 text-gray-400">Henüz banka hesabı eklenmemiş.</h3>
<p class="text-gray-400">Yönetim panelinden banka hesaplarınızı ekleyebilirsiniz.</p>
<div class="col-12">
<div class="bank-accounts-empty">
<i class="uil uil-wallet text-6xl text-slate-300 mb-4 d-block"></i>
<h3 class="h4 text-slate-500 mb-2">{!! t('Henüz banka hesabı eklenmemiş.') !!}</h3>
<p class="text-slate-400 mb-0">{!! t('Yönetim panelinden banka hesaplarınızı ekleyebilirsiniz.') !!}</p>
</div>
</div>
@endforelse
</div>
@if($page->content)
<div class="row mt-14">
<div class="col-lg-10 mx-auto">
<div class="prose max-w-none text-center text-gray-600">
{!! $page->content !!}
<div class="row mt-14">
<div class="col-lg-10 mx-auto">
<div class="prose max-w-none text-center text-gray-600">
{!! $page->content !!}
</div>
</div>
</div>
</div>
@endif
</div>
</section>
@push('scripts')
<script>
document.querySelectorAll('.bank-account-card__copy-btn').forEach(function (btn) {
btn.addEventListener('click', function () {
var iban = this.getAttribute('data-iban');
var copyLabel = this.getAttribute('data-copy-label');
var copiedLabel = this.getAttribute('data-copied-label');
var span = this.querySelector('span');
var icon = this.querySelector('i');
function showCopied() {
btn.classList.add('is-copied');
if (span) span.textContent = copiedLabel;
if (icon) icon.className = 'uil uil-check';
setTimeout(function () {
btn.classList.remove('is-copied');
if (span) span.textContent = copyLabel;
if (icon) icon.className = 'uil uil-copy';
}, 2000);
}
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(iban).then(showCopied).catch(function () {
fallbackCopy(iban);
showCopied();
});
} else {
fallbackCopy(iban);
showCopied();
}
});
});
function fallbackCopy(text) {
var ta = document.createElement('textarea');
ta.value = text;
ta.setAttribute('readonly', '');
ta.style.position = 'absolute';
ta.style.left = '-9999px';
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
}
</script>
@endpush
@endsection