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

refactor: modernize bank account page layout with premium tab styling and optimized letterhead print view

Browse Source
This commit is contained in:
Ümit Tunç
2026-06-02 20:16:35 +03:00
parent 80de8dc6f9
commit e8352f599b
2 changed files with 400 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/templates/corporate/bank-accounts.blade.php
+171 -165
View File
@@ -14,8 +14,21 @@
<style>
.bank-accounts-section {
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40%);
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
/* Optimized mobile padding */
.bank-accounts-section .main-container {
padding-top: 2rem;
padding-bottom: 2rem;
}
@media (min-width: 768px) {
.bank-accounts-section .main-container {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
.bank-account-card {
background: #ffffff;
border-radius: 1.25rem;
@@ -171,27 +184,6 @@
.bank-account-card__copy-btn-icon.is-copied {
color: #16a34a;
}
.bank-account-card__swift-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__swift-copy-btn:hover {
opacity: 0.8;
text-decoration: underline;
}
.bank-account-card__swift-copy-btn.is-copied {
color: #16a34a;
}
.bank-account-card__footer-bar {
height: 4px;
background: linear-gradient(90deg, var(--bs-primary), #3b82f6);
@@ -202,6 +194,7 @@
.bank-account-card:hover .bank-account-card__footer-bar {
transform: scaleX(1);
}
.bank-accounts-empty {
padding: 3rem 2rem;
background: #ffffff;
@@ -211,35 +204,66 @@
max-width: 420px;
margin: 0 auto;
}
.bank-accounts-tabs {
display: inline-flex;
gap: 0;
border-bottom: 2px solid #e2e8f0;
margin-bottom: 2.5rem;
/* Premium tab styles inspired by why-choose-us */
.nav-tabs.nav-tabs-bg {
display: flex !important;
flex-direction: column !important;
border: none;
background: #f1f5f9;
border-radius: 1rem;
padding: 0.5rem;
gap: 0.5rem;
}
.bank-accounts-tabs a,
.bank-accounts-tabs span {
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
@media (min-width: 768px) {
.nav-tabs.nav-tabs-bg {
flex-direction: row !important;
}
}
.nav-tabs.nav-tabs-bg .nav-item {
margin-bottom: 0 !important;
flex: 1;
}
.nav-tabs.nav-tabs-bg .nav-link {
border: none;
background: transparent;
padding: 1rem 1.25rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
text-align: left;
color: #64748b;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: color 0.2s, border-color 0.2s;
transition: all 0.2s ease;
height: 100%;
}
.bank-accounts-tabs a:hover {
color: #334155;
.nav-tabs.nav-tabs-bg .nav-link:hover {
background: rgba(255, 255, 255, 0.5);
color: #0f172a;
}
.bank-accounts-tabs .is-active {
color: var(--bs-primary);
border-bottom-color: var(--bs-primary);
.nav-tabs.nav-tabs-bg .nav-link.active {
background: #ffffff;
color: #0f172a;
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
}
.nav-tabs.nav-tabs-bg .nav-link .icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 0.75rem;
background: #f8fafc;
font-size: 1.5rem;
transition: background-color 0.2s;
}
.nav-tabs.nav-tabs-bg .nav-link.active .icon {
background: #f1f5f9;
}
.bank-accounts-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
.bank-accounts-grid {
@@ -251,13 +275,14 @@
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Legal info box adaptations */
.legal-info-box {
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);
padding: 2.5rem;
margin-top: 3rem;
padding: 2rem;
position: relative;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
@@ -353,29 +378,24 @@
color: #16a34a;
}
/* A4 Letterhead Preview Modal & Printing Styles */
.a4-letterhead-preview-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(8px);
z-index: 10000;
overflow-y: auto;
padding: 2.5rem 1rem;
box-sizing: border-box;
/* Elegant Letterhead tab view styles */
.letterhead-tab-container {
background: #f1f5f9;
border-radius: 1.25rem;
padding: 2rem 1rem;
border: 1px solid #e2e8f0;
}
.a4-letterhead-preview-modal.is-active {
display: block;
@media (min-width: 768px) {
.letterhead-tab-container {
padding: 3rem 2rem;
}
}
.a4-letterhead-preview-content {
background: #ffffff;
width: 210mm;
height: 297mm;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
border-radius: 8px;
position: relative;
padding: 20mm 15mm;
@@ -384,6 +404,7 @@
color: #0f172a !important;
overflow: hidden;
}
.a4-watermark {
position: absolute;
top: 50%;
@@ -395,7 +416,7 @@
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.05;
opacity: 0.15;
pointer-events: none;
z-index: 0;
}
@@ -429,7 +450,7 @@
margin-top: 1rem;
}
.a4-table th {
background: #f1f5f9;
background: transparent;
border-bottom: 2px solid #cbd5e1;
padding: 8px 12px;
font-size: 8pt;
@@ -459,10 +480,11 @@
border-radius: 4px;
text-transform: uppercase;
}
@media print {
/* Hide everything by default */
/* Hide absolutely everything else */
body * {
visibility: hidden;
visibility: hidden !important;
}
html, body {
background: #ffffff !important;
@@ -471,24 +493,10 @@
width: 210mm !important;
height: 297mm !important;
}
#letterheadModal {
display: block !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 210mm !important;
height: 297mm !important;
padding: 0 !important;
background: none !important;
backdrop-filter: none !important;
overflow: hidden !important;
}
.a4-letterhead-modal-header {
display: none !important;
}
.a4-letterhead-print {
#letterheadPrintArea, #letterheadPrintArea * {
visibility: visible !important;
display: block !important;
}
#letterheadPrintArea {
position: absolute !important;
left: 0 !important;
top: 0 !important;
@@ -500,9 +508,6 @@
margin: 0 !important;
background: #ffffff !important;
}
.a4-letterhead-print * {
visibility: visible !important;
}
@page {
size: A4 portrait;
margin: 0;
@@ -511,35 +516,66 @@
</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="container main-container">
<!-- Header -->
<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->translate('title') ?: $page->title !!}</h1>
<h1 class="display-2 mb-3">{!! $page->translate('title') ?: $page->title !!}</h1>
@if($page->translate('excerpt') ?: $page->excerpt)
<p class="lead fs-lg mb-0">{!! $page->translate('excerpt') ?: $page->excerpt !!}</p>
<p class="lead fs-lg mb-0 text-muted">{!! $page->translate('excerpt') ?: $page->excerpt !!}</p>
@endif
</div>
</div>
<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>
<!-- 3-Tab Header Row -->
<div class="row mb-8">
<div class="col-12 col-xl-10 mx-auto">
<ul class="nav nav-tabs nav-tabs-bg flex flex-col md:flex-row justify-between" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-bank-accounts" aria-selected="true" role="tab">
<div class="icon text-primary me-3 flex-shrink-0">
<i class="uil uil-university"></i>
</div>
<div>
<h4 class="mb-0 fs-16 font-bold">{!! t('Banka Hesapları') !!}</h4>
<span class="fs-12 text-muted">{!! t('EFT / Havale Bilgileri') !!}</span>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-legal-info" aria-selected="false" role="tab">
<div class="icon text-success me-3 flex-shrink-0">
<i class="uil uil-shield-check"></i>
</div>
<div>
<h4 class="mb-0 fs-16 font-bold">{!! t('Yasal Bilgiler') !!}</h4>
<span class="fs-12 text-muted">{!! t('Fatura & Sicil Kayıtları') !!}</span>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-letterhead" aria-selected="false" role="tab">
<div class="icon text-warning me-3 flex-shrink-0">
<i class="uil uil-file-check-alt"></i>
</div>
<div>
<h4 class="mb-0 fs-16 font-bold">{!! t('Antetli Kağıt') !!}</h4>
<span class="fs-12 text-muted">{!! t('Resmi Yazı & Hızlı Yazdır') !!}</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="text-center mb-8 d-flex justify-content-center gap-3 flex-wrap">
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-4" onclick="toggleLetterheadModal(true)">
<i class="uil uil-eye me-1" style="font-size: 1.1rem; vertical-align: middle;"></i>
<span>{!! t('Antetli Kağıt Önizle / Preview Letterhead') !!}</span>
</button>
<button type="button" class="btn btn-primary btn-sm rounded-pill px-5" onclick="printLetterhead()">
<i class="uil uil-file-download-alt me-1" style="font-size: 1.1rem; vertical-align: middle;"></i>
<span>{!! t('Resmi PDF İndir / Download Official PDF') !!}</span>
</button>
</div>
<!-- Tab Content -->
<div class="row">
<div class="col-12 col-xl-10 mx-auto">
<div class="tab-content">
<!-- Tab 1: Bank Accounts -->
<div class="tab-pane fade show active" id="tab-bank-accounts" role="tabpanel">
<div class="bank-accounts-grid">
@forelse($accounts as $index => $account)
@php
@@ -613,7 +649,6 @@
<i class="uil uil-copy" style="font-size: 1.15rem;"></i>
</button>
</div>
</div>
@endif
</div>
@@ -631,14 +666,45 @@
</div>
@endforelse
</div>
</div>
<!-- Tab 2: Legal Information -->
<div class="tab-pane fade" id="tab-legal-info" role="tabpanel">
@include('templates.corporate.partials.bank-accounts-legal-info')
</div>
<!-- Tab 3: Official Letterhead Preview & Print -->
<div class="tab-pane fade" id="tab-letterhead" role="tabpanel">
<div class="text-center mb-6 d-flex justify-content-center gap-3 flex-wrap">
<button type="button" class="btn btn-outline-primary rounded-pill px-4 shadow-sm" onclick="window.print()">
<i class="uil uil-print me-2" style="font-size: 1.2rem; vertical-align: middle;"></i>
<strong>{!! t('Yazdır / Print') !!}</strong>
</button>
<button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm" onclick="window.print()">
<i class="uil uil-file-download-alt me-2" style="font-size: 1.2rem; vertical-align: middle;"></i>
<strong>{!! t('PDF İndir / Download PDF') !!}</strong>
</button>
</div>
<div class="letterhead-tab-container">
<div class="table-responsive" style="overflow-x: auto; width: 100%;">
<div style="min-width: 215mm; padding: 10px 0;">
@include('templates.corporate.partials.bank-accounts-letterhead')
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Dynamic Content from DB -->
@php
$pageContent = $page->translate('content') ?: $page->content;
@endphp
@if($pageContent)
<div class="row mt-14">
<div class="row mt-12">
<div class="col-lg-10 mx-auto">
<div class="prose max-w-none text-center text-gray-600">
{!! $pageContent !!}
@@ -650,8 +716,6 @@
</div>
</section>
@include('templates.corporate.partials.bank-accounts-letterhead')
@push('scripts')
<script>
document.querySelectorAll('.bank-account-card__copy-btn-icon').forEach(function (btn) {
@@ -680,37 +744,6 @@ document.querySelectorAll('.bank-account-card__copy-btn-icon').forEach(function
});
});
document.querySelectorAll('.bank-account-card__swift-copy-btn').forEach(function (btn) {
btn.addEventListener('click', function () {
var swift = this.getAttribute('data-swift');
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(swift).then(showCopied).catch(function () {
fallbackCopy(swift);
showCopied();
});
} else {
fallbackCopy(swift);
showCopied();
}
});
});
function fallbackCopy(text) {
var ta = document.createElement('textarea');
ta.value = text;
@@ -748,33 +781,6 @@ document.querySelectorAll('.btn-copy-inline').forEach(function (btn) {
}
});
});
function toggleLetterheadModal(show) {
var modal = document.getElementById('letterheadModal');
if (show) {
modal.classList.add('is-active');
document.body.style.overflow = 'hidden';
} else {
modal.classList.remove('is-active');
document.body.style.overflow = '';
}
}
function printLetterhead() {
var modal = document.getElementById('letterheadModal');
var isModalActive = modal.classList.contains('is-active');
if (!isModalActive) {
modal.classList.add('is-active');
}
setTimeout(function() {
window.print();
if (!isModalActive) {
modal.classList.remove('is-active');
}
}, 150);
}
</script>
@endpush
resources/views/templates/corporate/partials/bank-accounts-letterhead.blade.php
+5 -31
View File
@@ -3,33 +3,8 @@
$isTr = ($locale === 'tr');
@endphp
<!-- A4 Letterhead Preview Modal -->
<div id="letterheadModal" class="a4-letterhead-preview-modal" onclick="if(event.target === this) toggleLetterheadModal(false)">
<div class="a4-letterhead-modal-header d-flex justify-content-between align-items-center mb-4 mx-auto" style="max-width: 210mm; width: 100%;">
<h4 class="text-white mb-0">
@if($isTr)
Antetli Kağıt Önizleme
@else
Official Letterhead Preview
@endif
</h4>
<div class="d-flex gap-2">
<button type="button" class="btn btn-light btn-sm rounded-pill px-4" onclick="printLetterhead()">
<i class="uil uil-print me-1"></i>
@if($isTr)
Yazdır / PDF İndir
@else
Print / Download PDF
@endif
</button>
<button type="button" class="btn btn-danger btn-sm rounded-circle p-2" onclick="toggleLetterheadModal(false)" style="width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; line-height: 1;">
<i class="uil uil-multiply"></i>
</button>
</div>
</div>
<!-- The actual A4 letterhead container -->
<div class="a4-letterhead-print a4-letterhead-preview-content">
<div class="a4-letterhead-print a4-letterhead-preview-content shadow-2xl" id="letterheadPrintArea">
<!-- Center faded Watermark -->
<div class="a4-watermark"></div>
@@ -40,7 +15,7 @@
<div class="a4-logo-wrap" style="margin-top: 0; padding-top: 0; line-height: 1;">
<img src="{{ asset('logos/truncgil-dikey.svg') }}" alt="Trunçgil Teknoloji" style="height: 28mm; max-height: 28mm; width: auto; object-fit: contain; display: block; margin-top: 0;">
</div>
<div class="text-end a4-company-info" style="font-size: 8pt; line-height: 1.4; color: #334155; font-weight: 500; margin-top: -28mm;">
<div class="text-end a4-company-info" style="font-size: 8pt; line-height: 1.4; color: #334155; font-weight: 500; margin-top: 0;">
<h5 style="font-size: 10pt; font-weight: 800; color: #0f172a; margin: 0 0 4px 0; padding: 0; line-height: 1.1;">TRUNÇGİL TEKNOLOJİ SAN. VE TİC. LTD. ŞTİ.</h5>
<div>Çamtepe Mah. Mahmut Tevfik Atay Bul. Gaziantep Teknopark</div>
<div>No: 4A İç Kapı No: 1 Şahinbey / Gaziantep / TÜRKİYE</div>
@@ -60,7 +35,7 @@
<!-- Title and Date -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h4 class="a4-doc-title mb-1" style="font-size: 13pt; font-weight: 800; letter-spacing: 0.05em; color: #0f172a;">
<h4 class="a4-doc-title mb-1" style="font-size: 13pt; font-weight: 800; letter-spacing: 0.05em; color: #0f172a; margin: 0;">
@if($isTr)
BANKA HESAP BİLGİLERİ
@else
@@ -153,7 +128,7 @@
</table>
<!-- Sign & Stamp section -->
<div class="row mt-5 pt-3">
<div class="row mt-auto pt-3">
<div class="col-6">
<div style="font-size: 7.5pt; line-height: 1.5; color: #64748b;">
<strong>
@@ -170,7 +145,7 @@
</div>
<div class="col-6 text-end">
<div style="display: inline-block; text-align: center; border-top: 1.5px solid #cbd5e1; padding-top: 8px; width: 65mm;">
<h6 class="mb-1" style="font-size: 8.5pt; font-weight: 800; color: #0f172a;">TRUNÇGİL TEKNOLOJİ SAN. VE TİC. LTD. ŞTİ.</h6>
<h6 class="mb-1" style="font-size: 8.5pt; font-weight: 800; color: #0f172a; margin: 0;">TRUNÇGİL TEKNOLOJİ SAN. VE TİC. LTD. ŞTİ.</h6>
<span style="font-size: 7pt; color: #64748b; font-weight: 600; text-transform: uppercase;">
@if($isTr)
Yetkili İmza & Kaşe
@@ -201,4 +176,3 @@
</div>
</div>
</div>
</div>