dwd/tools
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

t

Browse Source
This commit is contained in:
Suvodip
2024-07-11 12:45:10 +05:30
parent d368213568
commit 040c4b87c1
33 changed files with 1042 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
bar-code.php
View File

@@ -1,17 +1,46 @@
<section class="container-zz mx-auto my-20 flex-direction-col">
<h1 style="font-size: 25px;">Generate BAR Code</h1>
<!-- <h2 class="text-center">Alert: Text should not exceed 165 characters.</h2> -->
<form id="barGenerator" action="" class="flex-direction-col">
<textarea class="" name="" id="barCodeText" cols="36" rows="10" required style="background-color: #3d3d3d; padding: 6px;" autofocus></textarea>
<input class="" onclick="displayBarCode();" id="generatButton" type="submit" value="Generate BAR Code" style="background-color: #3d3d3d; padding: 10px 20px 10px 20px; border-radius: 10px; cursor: pointer; margin-top: 10px;">
</form>
<div class="">
<svg id="barCode"></svg>
<div class="" id="buttonContainer">
<button class="" id="download-button" style="background-color: #3d3d3d; padding: 10px 20px 10px 20px; border-radius: 10px; cursor: pointer; margin-top: 10px;">Download</button>
<button class="" onclick="getNewCode();" style="background-color: #3d3d3d; padding: 10px 20px 10px 20px; border-radius: 10px; cursor: pointer; margin-top: 10px;">New BAR Code</button>
<section class="diZContainer diZmxAuto">
<h1 class="diZBorderBottom">Generate BAR Code</h1>
<p class="diZTextJustify">This tool allows you to generate BAR codes from any text you input. The generated BAR code can be downloaded and used in various applications such as inventory management, product labeling, and more.</p>
<div class="diZMaxW600 diZFlexColumn diZmxAuto toolsSection diZmy20">
<form id="barGenerator" action="" class="diZFlexColumn">
<textarea class="" name="" id="barCodeText" rows="12" required autofocus></textarea><br>
<button onclick="displayBarCode();" id="generatButton"><span>Generate BAR Code</span></button>
<!-- <input class="" onclick="displayBarCode();" id="generatButton" type="submit" value="Generate BAR Code" > -->
</form>
<div class="diZJustifyCenter diZFlexColumn diZItemsCenter">
<svg id="barCode"></svg>
<div class="diZmt4 diZFlexRow" id="buttonContainer">
<button class="" id="download-button" ><span>Download</span></button>
<button class="" onclick="getNewCode();" ><span>New BAR Code</span></button>
</div>
</div>
</div>
<div>
<h3>Usage:</h3>
<ul>
<li><strong>Enter Text:</strong> Input your desired text into the text area provided.</li>
<li><strong>Generate BAR Code:</strong> Click the "Generate BAR Code" button to convert the text into a BAR code.</li>
<li><strong>View BAR Code:</strong> The generated BAR code will appear in the area below the button.</li>
<li><strong>Download BAR Code:</strong> Click the "Download" button to save the BAR code as an image file.</li>
<li><strong>Generate New BAR Code:</strong> Click the "New BAR Code" button to clear the text area and generate a new BAR code.</li>
</ul>
<h3>Features:</h3>
<ul>
<li>Generates BAR codes quickly and efficiently.</li>
<li>Supports various text inputs.</li>
<li>Provides a download option for the generated BAR code.</li>
<li>Easy-to-use interface with clear instructions.</li>
</ul>
<h3>Example Use Cases:</h3>
<ul>
<li>Businesses creating product labels for inventory management.</li>
<li>Retail stores generating BAR codes for pricing and checkout systems.</li>
<li>Developers testing BAR code generation in their applications.</li>
<li>Individuals organizing personal collections with BAR code labels.</li>
</ul>
</div>
</section>
<script src="/assets/html2canvas.min.js"></script>
<script>
@@ -22,7 +51,8 @@
const barText = document.getElementById('barCodeText');
document.getElementById('barCodeText').style.display = 'block';
document.getElementById('buttonContainer').style.display = 'none';
document.getElementById('generatButton').style.display = 'block';
document.getElementById('generatButton').style.display = 'flex';
document.getElementById('barCode').style.display = 'none';
barGenerator.addEventListener('submit', async function (event) {
event.preventDefault();
const formData = {
@@ -34,8 +64,9 @@
function displayBarCode(){
JsBarcode("#barCode", barCodeText.value);
document.getElementById('barCodeText').style.display = 'none';
document.getElementById('buttonContainer').style.display = 'block';
document.getElementById('buttonContainer').style.display = 'flex';
document.getElementById('generatButton').style.display = 'none';
document.getElementById('barCode').style.display = 'block';
// console.log(barCodeText)
}
@@ -68,15 +99,4 @@
function getNewCode(){
window.location.reload();
}
</script>
<style>
.container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
.mx-auto{margin-left:auto;margin-right:auto}
.my-20{margin-top:5rem;margin-bottom:5rem}
.flex-direction-col{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</script>