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

s2

Browse Source
This commit is contained in:
Suvodip
2024-07-06 21:19:02 +05:30
parent b9e2e40f11
commit d368213568
23 changed files with 879 additions and 591 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
image-compressor.php
View File

@@ -1,24 +1,26 @@
<div class="containezx" style="padding: 10px;">
<h1 style="font-size: 20px;">Image Compression Tool</h1>
<input type="file" id="imageInput" accept="image/*">
<br>
<label for="qualityInput">Compression Quality:</label>
<div style="display: flex; flex-direction: row;">
<input type="range" id="qualityInput" min="1" max="100" step="1" value="10" />&nbsp;
<span id="qualityValue" style="margin-top: -8px; font-size: 20px;">10%</span>
<section class="diZContainer diZmxAuto ">
<h1 class="diZBorderBottom">Image Compression Tool</h1>
<div class="toolsSection diZMaxW500 diZmxAuto diZmy20">
<div>
<input type="file" id="imageInput" accept="image/*">
</div>
<div>
<label for="qualityInput">Compression Quality:</label>
<div class="diZFlexRow">
<input class="diZw100" type="range" id="qualityInput" min="1" max="100" step="1" value="10" />&nbsp;
<span id="qualityValue">10%</span>
</div>
</div>
<div class="image-preview">
<img id="preview" src="" alt="" style="width: 100%;" />
<span id="imageSize" class="image-size"></span>
</div>
<div class="diZFlexBetween">
<button class="comp-button" onclick="compressImage()">Compress Image</button>
<a class="diZDisplayNone diZButtonDefault" id="downloadLink" href="#" download="compressed_image.jpg">Download Compressed Image</a>
</div>
</div>
<br>
<div class="image-preview">
<img id="preview" src="" alt="" />
</div>
<span id="imageSize" class="image-size"></span>
<br>
<div style="display: flex; flex-direction: row;">
<button class="comp-button" onclick="compressImage()">Compress Image</button>
<a class="comp-button" id="downloadLink" href="#" download="compressed_image.jpg" style="display: none; margin-left: 20px;">Download Compressed Image</a>
</div>
</div>
</section>
<script>
function compressImage() {
@@ -70,62 +72,4 @@ function compressImage() {
document.getElementById('qualityInput').addEventListener('input', function() {
document.getElementById('qualityValue').textContent = this.value + "%";
});
</script>
<style>
.containezx {
margin-top: 100px;
max-width: 600px;
margin: 100px auto;
background-color: #3d3d3d;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 5px #ffffff;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input[type="file"] {
margin-bottom: 10px;
}
input[type="range"] {
width: 100%;
margin-bottom: 10px;
}
.image-preview {
text-align: center;
margin-bottom: 20px;
}
#preview {
max-width: 100%;
border-radius: 8px;
}
.image-size {
font-size: 14px;
color: #999;
}
.comp-button{
background-color: #6d6d6d;
padding: 10px 20px 10px 20px;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 12px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.comp-button:hover{
background-color: #8d8d8d;
}
</style>
</script>