207 lines
10 KiB
HTML
207 lines
10 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>File Converter</title>
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- jQuery CDN -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<div class="container mx-auto p-6">
|
|
<h1 class="text-3xl font-bold mb-6 text-center">File Converter</h1>
|
|
|
|
<!-- Vypisy Section -->
|
|
<h2 class="text-2xl font-bold mb-4">Vypisy</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="sparkasse" data-section="vypisy">
|
|
<h2 class="text-xl font-semibold mb-2">Sparkasse</h2>
|
|
<p class="text-gray-600 text-sm italic">DE 9585 0503 0002 2126 7034</p>
|
|
<p class="text-gray-600 text-sm">.gpc vypis v EUR</p>
|
|
</div>
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="pko" data-section="vypisy">
|
|
<h2 class="text-xl font-semibold mb-2">PKO .gpc</h2>
|
|
<p class="text-gray-600 text-sm italic">PL 95102013900000630206821286</p>
|
|
<p class="text-gray-600 text-sm">.gpc vypis v PLN</p>
|
|
</div>
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="allegro" data-section="vypisy">
|
|
<h2 class="text-xl font-semibold mb-2">Allegro</h2>
|
|
<p class="text-gray-600 text-sm">.gpc vypis ALPZ, ALPU, ALAP</p>
|
|
</div>
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="wise_huf" data-section="vypisy">
|
|
<h2 class="text-xl font-semibold mb-2">Wise HUF .gpc</h2>
|
|
<p class="text-gray-600 text-sm italic">330005602964780100</p>
|
|
<p class="text-gray-600 text-sm">.gpc vypis v HUF</p>
|
|
</div>
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="wise_ron" data-section="vypisy">
|
|
<h2 class="text-xl font-semibold mb-2">Wise RON .gpc</h2>
|
|
<p class="text-gray-600 text-sm italic">RO33 BREL 0005 6029 6478 0100</p>
|
|
<p class="text-gray-600 text-sm">.gpc vypis v RON</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Aviza daily Section -->
|
|
<h2 class="text-2xl font-bold mt-8 mb-4">Aviza - parovani primo na jednu platbu</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="paynl_single" data-section="aviza">
|
|
<h2 class="text-xl font-semibold mb-2">Paynl .csv</h2>
|
|
<p class="text-gray-600 text-sm italic">Pouzijte .zip se vsemi zip soubory z exportu</p>
|
|
<p class="text-gray-600 text-sm">.csv aviza pro EUR ucet</p>
|
|
</div>
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="gls_single_huf" data-section="aviza">
|
|
<h2 class="text-xl font-semibold mb-2">GLS HU.csv</h2>
|
|
<p class="text-gray-600 text-sm italic">Pouzijte .zip se vsemi zip soubory z exportu (z disku zazipovat slozku <i>Aviza GLS</i>)</p>
|
|
<p class="text-gray-600 text-sm">.csv aviza pro HUF dobirky</p>
|
|
</div>
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="przelewy24_single" data-section="aviza">
|
|
<h2 class="text-xl font-semibold mb-2">Przelewy24 .csv</h2>
|
|
<p class="text-gray-600 text-sm italic">Pouzijte .zip se vsemi .csv soubory z reportu</p>
|
|
<p class="text-gray-600 text-sm">.csv aviza pro Przelewy24</p>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- Aviza Section -->
|
|
<h2 class="text-2xl font-bold mt-8 mb-4">Aviza - automaticke prirazeni (podporuje import vice souboru najednou)</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="paynl_auto" data-section="aviza">
|
|
<h2 class="text-xl font-semibold mb-2">Paynl .gpc</h2>
|
|
<p class="text-gray-600 text-sm italic">Pouzijte .zip se vsemi zip soubory z exportu</p>
|
|
<p class="text-gray-600 text-sm">.gpc aviza pro EUR ucet</p>
|
|
</div>
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="przelewy24_auto" data-section="aviza">
|
|
<h2 class="text-xl font-semibold mb-2">Przelewy24 .gpc</h2>
|
|
<p class="text-gray-600 text-sm italic">Pouzijte .zip se vsemi .csv soubory z reportu</p>
|
|
<p class="text-gray-600 text-sm">.gpc aviza pro Przelewy24</p>
|
|
</div>
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="przelewy24_transactions" data-section="aviza-refunds">
|
|
<h2 class="text-xl font-semibold mb-2">Przelewy24 transakce .gpc</h2>
|
|
<p class="text-gray-600 text-sm italic">Pouzijte jeden .csv soubor z transakci</p>
|
|
<p class="text-gray-600 text-sm">.gpc aviza pro Przelewy24</p>
|
|
</div>
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50 opacity-25 pointer-events-none"
|
|
data-option="gls_auto_huf" data-section="aviza">
|
|
<h2 class="text-xl font-semibold mb-2">GLS HU .gpc</h2>
|
|
<p class="text-gray-600 text-sm italic">Pouzijte .zip se vsemi zip soubory z exportu (z disku zazipovat slozku <i>Aviza GLS</i>)</p>
|
|
<p class="text-gray-600 text-sm">.gpc aviza pro HUF dobirky</p>
|
|
</div>
|
|
<div class="tile bg-white shadow-md rounded-lg p-4 cursor-pointer hover:bg-blue-50"
|
|
data-option="packeta2comgate" data-section="aviza-other">
|
|
<h2 class="text-xl font-semibold mb-2">Packeta .gpc</h2>
|
|
<p class="text-gray-600 text-sm italic">Pouzijte .zip se vsemi avizy ze zasilkovny</p>
|
|
<p class="text-gray-600 text-sm">.gpc aviza pro dobirky z packety</p>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal for file upload -->
|
|
<div id="modal" class="fixed inset-0 hidden z-50 flex items-center justify-center bg-black bg-opacity-50">
|
|
<div class="bg-white rounded-lg w-11/12 max-w-md p-6 relative">
|
|
<button id="closeModal" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
|
|
×
|
|
</button>
|
|
<h2 class="text-2xl font-bold mb-4">Nahrát soubor</h2>
|
|
<form id="convertForm" method="post" enctype="multipart/form-data">
|
|
<!-- Hidden field to store the chosen conversion option -->
|
|
<input type="hidden" name="option" id="option">
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 mb-1">Soubor importu</label>
|
|
<input type="file" name="file" class="border p-2 w-full" required>
|
|
</div>
|
|
|
|
<!-- Extra file input for Aviza section (bank statement) -->
|
|
<div id="bankStatementDiv" class="mb-4 hidden">
|
|
<label class="block text-gray-700 mb-1">Nahrát výpis z účtu</label>
|
|
<input type="file" name="file_bank_statement" class="border p-2 w-full">
|
|
<p class="text-gray-500 text-sm">
|
|
Výpis účtu by měl být za stejné nebo delší období, jako je soubor importu, slouží k párování plateb.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Extra file input for aviza-refunds section (refund file) -->
|
|
<div id="refundFileDiv" class="mb-4 hidden">
|
|
<label class="block text-gray-700 mb-1">Nahrát soubor s refundy</label>
|
|
<input type="file" name="file_refunds" class="border p-2 w-full">
|
|
<p class="text-gray-500 text-sm">
|
|
Výpis by měl být za stejné nebo delší období, jako je soubor importu, slouží k načtení vrácených plateb.
|
|
</p>
|
|
</div>
|
|
|
|
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
|
|
Submit
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Small Loading Box -->
|
|
<div id="loadingBox" class="hidden fixed bottom-4 right-4 bg-white shadow-lg rounded p-4 flex items-center space-x-2 border border-gray-300">
|
|
<span class="text-blue-500 text-2xl">↓</span>
|
|
<span class="text-gray-800">Soubor se generuje…</span>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
// When a tile is clicked, set the option value and open the modal.
|
|
// If the tile belongs to the "aviza" section, show the bank statement input.
|
|
$('.tile').click(function(){
|
|
const option = $(this).data('option');
|
|
const section = $(this).data('section');
|
|
$('#option').val(option);
|
|
if (section === 'aviza') {
|
|
$('#bankStatementDiv').removeClass('hidden');
|
|
} else {
|
|
$('#bankStatementDiv').addClass('hidden');
|
|
}
|
|
|
|
if (section === 'aviza-refunds') {
|
|
$('#refundFileDiv').removeClass('hidden');
|
|
$('#bankStatementDiv').removeClass('hidden');
|
|
} else {
|
|
$('#refundFileDiv').addClass('hidden');
|
|
$('#bankStatementDiv').addClass('hidden');
|
|
}
|
|
|
|
|
|
$('#modal').removeClass('hidden');
|
|
});
|
|
|
|
// Close modal when clicking on the close button.
|
|
$('#closeModal').click(function(){
|
|
$('#modal').addClass('hidden');
|
|
});
|
|
|
|
// On form submission: hide the modal and show the small loading box.
|
|
$('#convertForm').on('submit', function(e) {
|
|
$('#modal').addClass('hidden'); // Hide modal before submitting
|
|
$('#loadingBox').removeClass('hidden'); // Show the small loading box
|
|
});
|
|
|
|
// When the window regains focus, hide the loading box.
|
|
// This signals that the download dialog has been handled.
|
|
$(window).on('focus', function() {
|
|
$('#loadingBox').addClass('hidden');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |