Skip to content

Commit

Permalink
updating fonts
Browse files Browse the repository at this point in the history
  • Loading branch information
@szubair22
szubair22 committed Sep 30, 2024
1 parent 7fbae98 commit 03a988a
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 78 deletions.
86 changes: 30 additions & 56 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,70 +11,56 @@
<div class="container">
<div class="bg-white shadow-md rounded-lg p-6">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold mb-2">CSV Mapping Tool for Sage Intacct</h1>
<p class="text-gray-600">Save time and reduce errors by automating the mapping process.</p>
<h1>CSV Mapping Tool for Sage Intacct</h1>
<p class="subtitle">Save time and reduce errors by automating the mapping process.</p>
</div>

<div class="mb-8">
<h2 class="text-xl font-semibold mb-4">How It Works</h2>
<ol class="list-none space-y-4">
<li class="flex items-start">
<span class="mr-2 bg-black text-white rounded-full w-6 h-6 flex items-center justify-center text-sm">1</span>
<div>
<span class="font-semibold">Upload Your Files:</span>
<ul class="list-disc list-inside ml-6 mt-2">
<li>First, upload your data CSV.</li>
<li>Then, upload your Intacct Template CSV.</li>
</ul>
</div>
<h2>How It Works</h2>
<ol>
<li>
<span class="number-circle">1</span>
<strong>Upload Your Files:</strong>
<ul class="list-disc list-inside ml-6 mt-2">
<li>First, upload your data CSV.</li>
<li>Then, upload your Intacct Template CSV.</li>
</ul>
</li>
<li class="flex items-start">
<span class="mr-2 bg-black text-white rounded-full w-6 h-6 flex items-center justify-center text-sm">2</span>
<div>
<span class="font-semibold">Preview and Map:</span>
<ul class="list-disc list-inside ml-6 mt-2">
<li>Match the data fields from your file to the Intacct format.</li>
<li>Review the mappings before finalizing.</li>
</ul>
</div>
<li>
<span class="number-circle">2</span>
<strong>Preview and Map:</strong>
<ul class="list-disc list-inside ml-6 mt-2">
<li>Match the data fields from your file to the Intacct format.</li>
<li>Review the mappings before finalizing.</li>
</ul>
</li>
</ol>
</div>

<div class="mb-8">
<h2 class="text-xl font-semibold mb-4">Upload CSV Files</h2>
<h2>Upload CSV Files</h2>
<form id="uploadForm" class="space-y-4">
<div>
<label for="dataFile" class="block mb-2">Data CSV:</label>
<div class="file-input">
<label for="dataFile">Data CSV:</label>
<div class="flex items-center">
<input type="file" id="dataFile" name="dataFile" accept=".csv" required class="hidden">
<label for="dataFile" class="file-input-label bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded inline-flex items-center">
<span>Choose File</span>
<label for="dataFile" class="file-input-label">
Choose File
</label>
<span id="dataFileName" class="ml-3 text-gray-600">No file chosen</span>
<button type="button" class="ml-2 text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</svg>
</button>
<span id="dataFileName" class="file-name">No file chosen</span>
</div>
</div>
<div>
<label for="templateFile" class="block mb-2">Intacct Template CSV:</label>
<div class="file-input">
<label for="templateFile">Intacct Template CSV:</label>
<div class="flex items-center">
<input type="file" id="templateFile" name="templateFile" accept=".csv" required class="hidden">
<label for="templateFile" class="file-input-label bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded inline-flex items-center">
<span>Choose File</span>
<label for="templateFile" class="file-input-label">
Choose File
</label>
<span id="templateFileName" class="ml-3 text-gray-600">No file chosen</span>
<button type="button" class="ml-2 text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</svg>
</button>
<span id="templateFileName" class="file-name">No file chosen</span>
</div>
</div>
<button type="submit" class="btn btn-black w-full flex items-center justify-center bg-black text-white py-2 px-4 rounded hover:bg-gray-800">
<button type="submit" class="btn btn-black">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
</svg>
Expand All @@ -86,17 +72,5 @@ <h2 class="text-xl font-semibold mb-4">Upload CSV Files</h2>
</div>

<script src="script.js"></script>
<script>
// Add this script to update file name displays
document.getElementById('dataFile').addEventListener('change', function(e) {
var fileName = e.target.files[0] ? e.target.files[0].name : 'No file chosen';
document.getElementById('dataFileName').textContent = fileName;
});

document.getElementById('templateFile').addEventListener('change', function(e) {
var fileName = e.target.files[0] ? e.target.files[0].name : 'No file chosen';
document.getElementById('templateFileName').textContent = fileName;
});
</script>
</body>
</html>
60 changes: 38 additions & 22 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
/* Custom styles for dark theme */
body {
font-family: Arial, sans-serif;
background-color: white;
color: #1f2937;
color: #333;
background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
background-size: 20px 20px;
line-height: 1.5;
}

.container {
Expand All @@ -27,12 +29,19 @@ body {

h1 {
font-size: 1.875rem;
font-weight: 700;
font-weight: 600;
margin-bottom: 0.5rem;
}

h2 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}

.subtitle {
color: #6b7280;
margin-bottom: 2rem;
}

.file-input-label {
Expand All @@ -51,10 +60,14 @@ h2 {
}

.btn {
padding: 0.5rem 1rem;
padding: 0.75rem 1rem;
font-weight: 600;
border-radius: 0.25rem;
transition: background-color 0.2s;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.btn-black {
Expand All @@ -71,31 +84,34 @@ ol {
padding-left: 0;
}

ul {
list-style-type: disc;
padding-left: 1.5rem;
}

.mb-8 {
margin-bottom: 2rem;
ol li {
margin-bottom: 1rem;
}

.space-y-4 > * + * {
margin-top: 1rem;
.number-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
background-color: #111827;
color: white;
border-radius: 50%;
margin-right: 0.5rem;
font-size: 0.875rem;
}

/* Remove unnecessary styles */
table, th, tr {
background-color: transparent;
color: inherit;
.file-input {
margin-bottom: 1rem;
}

select, input[type="text"], input[type="file"] {
background-color: white;
color: black;
border-color: #d1d5db;
.file-input label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
}

select:focus, input[type="text"]:focus, input[type="file"]:focus {
border-color: #3b82f6;
.file-name {
margin-left: 0.5rem;
color: #6b7280;
}

0 comments on commit 03a988a

Please sign in to comment.