Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@TMHSDigital
TMHSDigital authored Jul 9, 2024
1 parent 07080fb commit c22274e
Showing 1 changed file with 15 additions and 81 deletions.
96 changes: 15 additions & 81 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
background-color: #000;
color: #fff;
}
h1, h2, .cyber-button {
h1, h2, .tech-button {
font-family: 'Orbitron', sans-serif;
}
.neon-border {
Expand All @@ -23,36 +23,21 @@
.neon-text {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #0ff, 0 0 35px #0ff, 0 0 40px #0ff;
}
.cyber-button {
background: linear-gradient(45deg, #00f, #0ff);
.tech-button {
background: linear-gradient(45deg, #00a3ff, #00fff2);
color: #000;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 10px 20px;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.cyber-button:before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
transform: rotate(45deg);
font-weight: bold;
text-transform: uppercase;
border-radius: 5px;
transition: all 0.3s ease;
opacity: 0;
cursor: pointer;
}
.cyber-button:hover:before {
left: 100%;
opacity: 1;
.tech-button:hover {
background: linear-gradient(45deg, #00fff2, #00a3ff);
box-shadow: 0 0 10px #00fff2;
}
</style>
</head>
Expand All @@ -79,66 +64,15 @@ <h1 class="text-4xl font-bold mb-8 text-center neon-text">Futuristic Image Resiz
</div>

<div class="flex justify-between items-center">
<button id="resize-button" class="cyber-button flex items-center text-lg">
<svg class="w-6 h-6 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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path></svg>
Resize Image
</button>
<a id="download-link" class="hidden cyber-button bg-green-700 hover:bg-green-600 flex items-center transition-all duration-300 ease-in-out transform hover:scale-105 text-lg">
<svg class="w-6 h-6 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
Download Resized Image
</a>
<button id="resize-button" class="tech-button">Resize Image</button>
<a id="download-link" class="hidden tech-button">Download</a>
</div>

<p class="text-lg text-gray-300 mt-6 text-center">Click 'Resize Image' to process, then 'Download' to save your image.</p>
</div>

<script>
let cropper;
const fileInput = document.getElementById('file-input');
const imageContainer = document.getElementById('image-container');
const resizeButton = document.getElementById('resize-button');
const downloadLink = document.getElementById('download-link');
const widthInput = document.getElementById('width');
const heightInput = document.getElementById('height');

fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
imageContainer.innerHTML = `<img src="${e.target.result}" id="image" class="max-w-full">`;
const image = document.getElementById('image');
cropper = new Cropper(image, {
aspectRatio: NaN,
viewMode: 1,
});
};
reader.readAsDataURL(file);
}
});

resizeButton.addEventListener('click', () => {
if (cropper) {
resizeButton.disabled = true;
resizeButton.innerHTML = '<svg class="animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Processing...';

const width = parseInt(widthInput.value);
const height = parseInt(heightInput.value);
const canvas = cropper.getCroppedCanvas({
width: width,
height: height
});

canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = 'resized-image.png';
downloadLink.classList.remove('hidden');
resizeButton.disabled = false;
resizeButton.innerHTML = '<svg class="w-6 h-6 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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path></svg>Resize Image';
});
}
});
// ... (Same JavaScript code as before) ...
</script>
</body>
</html>

0 comments on commit c22274e

Please sign in to comment.