refactor: simplify Teknopark KDV box by removing interactive toggle and update markdown table rendering to include responsive overflow wrappers
This commit is contained in:
Ümit Tunç
@@ -74,65 +74,55 @@
|
||||
box-shadow: 0 0 8px var(--accent-color-glow);
|
||||
}
|
||||
|
||||
/* Rendered Markdown Styling */
|
||||
.proposal-content h1 {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.dark .proposal-content h1 { color: #f8fafc; }
|
||||
|
||||
.proposal-content h2 {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.dark .proposal-content h2 {
|
||||
color: #f1f5f9;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
/* Rendered Markdown Styling & Responsive Overflow Control */
|
||||
.proposal-content {
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.proposal-content h3 {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
margin-top: 1.8rem;
|
||||
margin-bottom: 0.75rem;
|
||||
.proposal-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.dark .proposal-content h3 { color: #e2e8f0; }
|
||||
|
||||
.proposal-content p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: #475569;
|
||||
margin-bottom: 1.25rem;
|
||||
.proposal-content pre {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-radius: 12px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.proposal-content code {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Responsive Table Wrapper */
|
||||
.table-responsive {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin: 1.5rem 0;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.dark .table-responsive {
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
box-shadow: none;
|
||||
}
|
||||
.dark .proposal-content p { color: #94a3b8; }
|
||||
|
||||
/* Tables inside Markdown styling */
|
||||
.proposal-content table {
|
||||
width: 100%;
|
||||
margin: 2rem 0;
|
||||
min-width: 600px;
|
||||
margin: 0;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.925rem;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
|
||||
font-size: 0.9rem;
|
||||
border: none;
|
||||
}
|
||||
.dark .proposal-content table {
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -706,8 +696,8 @@
|
||||
|
||||
</article>
|
||||
|
||||
<!-- Interactive pricing & Gaziantep Teknopark %0 KDV muafiyeti box -->
|
||||
@if($proposal->total_price && ($proposal->meta['show_calculator'] ?? true))
|
||||
<!-- Fixed Gaziantep Teknopark %0 KDV muafiyeti & Net Fiyat box -->
|
||||
@if($proposal->total_price)
|
||||
<section class="p-6 sm:p-8 rounded-2xl bg-white dark:bg-slate-800 border border-slate-200/60 dark:border-slate-700/50 shadow-sm relative overflow-hidden transition-all duration-300">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r {{ $gradient }}"></div>
|
||||
|
||||
@@ -719,39 +709,29 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
|
||||
</svg>
|
||||
<span>Teknopark KDV Muafiyeti Avantajı</span>
|
||||
<span>Teknopark KDV Muafiyeti (%0 KDV)</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-display font-bold text-slate-900 dark:text-white mb-2">
|
||||
4691 Sayılı Kanun KDV Muafiyeti
|
||||
4691 Sayılı Kanun KDV Muafiyetli Net Fiyat
|
||||
</h3>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed mb-0">
|
||||
Trunçgil Teknoloji, Gaziantep Üniversitesi Teknoparkı bünyesinde AR-GE yürüten tescilli bir kuruluştur. Kanun kapsamında geliştirdiğimiz yazılım çözümleri KDV'den (%0 KDV) istisnadır. Bu sayede maliyetlerinizde doğrudan avantaj sağlarsınız.
|
||||
Trunçgil Teknoloji, Gaziantep Üniversitesi Teknoparkı bünyesinde AR-GE yürüten tescilli bir kuruluştur. 4691 Sayılı Kanun kapsamında geliştirdiğimiz yazılım çözümleri KDV'den (%0 KDV) istisnadır.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Box with Toggle Switch -->
|
||||
<!-- Price Summary Box (Fixed Net Price, Non-Optional) -->
|
||||
<div class="w-full md:w-80 shrink-0 p-5 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-800 flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-slate-400 dark:text-slate-500 font-bold uppercase">KDV Muafiyeti Göster</span>
|
||||
|
||||
<!-- Toggle Switch -->
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" id="kdv-toggle" class="sr-only peer" checked>
|
||||
<div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-slate-600 peer-checked:bg-emerald-500"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-slate-200/50 dark:border-slate-800/80 pt-3">
|
||||
<div class="text-xs text-slate-400 dark:text-slate-500 font-semibold mb-1" id="kdv-label">Teknopark Avantajlı Fiyat (%0 KDV)</div>
|
||||
<div class="text-2xl font-display font-extrabold text-slate-900 dark:text-white" id="kdv-price">
|
||||
<div>
|
||||
<div class="text-xs text-slate-400 dark:text-slate-500 font-semibold mb-1">Teknopark Muafiyetli Net Fiyat (%0 KDV)</div>
|
||||
<div class="text-2xl font-display font-extrabold text-slate-900 dark:text-white">
|
||||
{{ number_format($proposal->total_price, 2, ',', '.') }} {{ $proposal->currency === 'USD' ? 'USD' : ($proposal->currency === 'EUR' ? 'EUR' : 'TL') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-2.5 rounded-lg bg-emerald-50 dark:bg-emerald-950/20 text-emerald-800 dark:text-emerald-400 border border-emerald-200/20 text-xs font-semibold leading-relaxed flex items-start gap-2" id="kdv-benefit-box">
|
||||
<div class="p-2.5 rounded-lg bg-emerald-50 dark:bg-emerald-950/20 text-emerald-800 dark:text-emerald-400 border border-emerald-200/20 text-xs font-semibold leading-relaxed flex items-start gap-2">
|
||||
<i data-lucide="sparkles" class="w-4 h-4 shrink-0 text-emerald-500"></i>
|
||||
<span>
|
||||
%20 standart KDV oranına kıyasla toplamda <strong id="kdv-benefit-amount">{{ number_format($proposal->total_price * 0.20, 2, ',', '.') }}</strong> kazanç sağladınız.
|
||||
%20 standart KDV oranına kıyasla toplamda <strong>{{ number_format($proposal->total_price * 0.20, 2, ',', '.') }} {{ $proposal->currency === 'USD' ? 'USD' : ($proposal->currency === 'EUR' ? 'EUR' : 'TL') }}</strong> net KDV tasarrufu sağlandı.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1024,6 +1004,16 @@
|
||||
const preprocessedText = parseGithubAlerts(rawMarkdown);
|
||||
contentDiv.innerHTML = marked.parse(preprocessedText);
|
||||
|
||||
// Auto-wrap markdown tables in responsive overflow wrapper to prevent design overflow
|
||||
contentDiv.querySelectorAll('table').forEach(table => {
|
||||
if (!table.parentElement.classList.contains('table-responsive')) {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'table-responsive';
|
||||
table.parentNode.insertBefore(wrapper, table);
|
||||
wrapper.appendChild(table);
|
||||
}
|
||||
});
|
||||
|
||||
// Render Mermaid Diagrams
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
mermaid.initialize({
|
||||
@@ -1495,31 +1485,7 @@
|
||||
});
|
||||
});
|
||||
|
||||
// 4. KDV Switch Calculator Logic
|
||||
const kdvToggle = document.getElementById('kdv-toggle');
|
||||
const kdvLabel = document.getElementById('kdv-label');
|
||||
const kdvPrice = document.getElementById('kdv-price');
|
||||
const kdvBenefitBox = document.getElementById('kdv-benefit-box');
|
||||
|
||||
if (kdvToggle) {
|
||||
const totalPrice = parseFloat('{{ $proposal->total_price }}');
|
||||
const currencySymbol = '{{ $proposal->currency === 'USD' ? 'USD' : ($proposal->currency === 'EUR' ? 'EUR' : 'TL') }}';
|
||||
|
||||
kdvToggle.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
// %0 KDV selected (Teknopark exemption)
|
||||
kdvLabel.textContent = 'Teknopark Avantajlı Fiyat (%0 KDV)';
|
||||
kdvPrice.textContent = new Intl.NumberFormat('tr-TR', { minimumFractionDigits: 2 }).format(totalPrice) + ' ' + currencySymbol;
|
||||
kdvBenefitBox.classList.remove('hidden');
|
||||
} else {
|
||||
// %20 standard KDV added
|
||||
const priceWithVat = totalPrice * 1.20;
|
||||
kdvLabel.textContent = 'Standart Fiyat (+%20 KDV)';
|
||||
kdvPrice.textContent = new Intl.NumberFormat('tr-TR', { minimumFractionDigits: 2 }).format(priceWithVat) + ' ' + currencySymbol;
|
||||
kdvBenefitBox.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
// 4. Client Interaction Actions & Tabs switching
|
||||
|
||||
// 5. Client Interaction Actions & Tabs switching
|
||||
function switchTab(tab) {
|
||||
|
||||
Reference in New Issue
Block a user