|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Image Convert - Tools Collection</title> |
|
|
<script src="/image/javascript/image.js"></script> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; |
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); |
|
|
min-height: 100vh; |
|
|
color: #e4e4e4; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1000px; |
|
|
margin: 0 auto; |
|
|
padding: 40px 20px; |
|
|
} |
|
|
|
|
|
.header { |
|
|
text-align: center; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
.back-button { |
|
|
position: absolute; |
|
|
left: 20px; |
|
|
top: 20px; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
padding: 12px 20px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
border-radius: 8px; |
|
|
color: #e4e4e4; |
|
|
text-decoration: none; |
|
|
font-size: 0.9rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.back-button:hover { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
transform: translateX(-5px); |
|
|
} |
|
|
|
|
|
.back-button svg { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
font-size: 4rem; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 2.5rem; |
|
|
background: linear-gradient(135deg, #e94560, #f39c12); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.subtitle { |
|
|
color: #8892b0; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.tool-card { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 20px; |
|
|
padding: 40px; |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.upload-section { |
|
|
border: 2px dashed rgba(233, 69, 96, 0.5); |
|
|
border-radius: 15px; |
|
|
padding: 60px 40px; |
|
|
text-align: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.upload-section:hover { |
|
|
border-color: #e94560; |
|
|
background: rgba(233, 69, 96, 0.1); |
|
|
} |
|
|
|
|
|
.upload-section.dragover { |
|
|
border-color: #e94560; |
|
|
background: rgba(233, 69, 96, 0.15); |
|
|
transform: scale(1.02); |
|
|
} |
|
|
|
|
|
.upload-icon { |
|
|
font-size: 3rem; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.upload-text { |
|
|
font-size: 1.2rem; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.upload-hint { |
|
|
color: #8892b0; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
#file-input { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.info-box { |
|
|
background: rgba(23, 162, 184, 0.1); |
|
|
border: 1px solid rgba(23, 162, 184, 0.3); |
|
|
border-radius: 10px; |
|
|
padding: 15px 20px; |
|
|
margin-bottom: 30px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
} |
|
|
|
|
|
.info-box span { |
|
|
font-size: 1.3rem; |
|
|
} |
|
|
|
|
|
.info-box p { |
|
|
font-size: 0.9rem; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.settings-section { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 15px; |
|
|
padding: 25px; |
|
|
margin-bottom: 30px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.settings-title { |
|
|
color: #e4e4e4; |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.settings-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.setting-group { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.setting-label { |
|
|
color: #8892b0; |
|
|
font-weight: 500; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.setting-input { |
|
|
padding: 12px 15px; |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
border-radius: 8px; |
|
|
font-size: 1rem; |
|
|
color: #e4e4e4; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
select.setting-input { |
|
|
padding-right: 40px; |
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e4e4e4' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); |
|
|
background-repeat: no-repeat; |
|
|
background-position: right 15px center; |
|
|
-webkit-appearance: none; |
|
|
-moz-appearance: none; |
|
|
appearance: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.setting-input:focus { |
|
|
outline: none; |
|
|
border-color: #e94560; |
|
|
background-color: rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.setting-input option { |
|
|
background: #16213e; |
|
|
color: #e4e4e4; |
|
|
} |
|
|
|
|
|
.files-preview { |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.preview-title { |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 15px; |
|
|
color: #e4e4e4; |
|
|
} |
|
|
|
|
|
.files-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.file-card { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 10px; |
|
|
padding: 15px; |
|
|
text-align: center; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.file-card .remove-button { |
|
|
position: absolute; |
|
|
top: 5px; |
|
|
right: 5px; |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
border-radius: 50%; |
|
|
border: none; |
|
|
background: #dc3545; |
|
|
color: white; |
|
|
cursor: pointer; |
|
|
font-size: 14px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.file-preview { |
|
|
width: 100%; |
|
|
height: 100px; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
margin-bottom: 10px; |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.file-preview img { |
|
|
max-width: 100%; |
|
|
max-height: 100%; |
|
|
object-fit: contain; |
|
|
} |
|
|
|
|
|
.file-info h4 { |
|
|
font-size: 0.8rem; |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.file-info p { |
|
|
font-size: 0.7rem; |
|
|
color: #8892b0; |
|
|
} |
|
|
|
|
|
.file-status { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 5px; |
|
|
margin-top: 8px; |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: #28a745; |
|
|
} |
|
|
|
|
|
.status-indicator.processing { |
|
|
background: #ffc107; |
|
|
animation: pulse 1s infinite; |
|
|
} |
|
|
|
|
|
.status-indicator.error { |
|
|
background: #dc3545; |
|
|
} |
|
|
|
|
|
.action-buttons { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 15px 30px; |
|
|
border-radius: 10px; |
|
|
border: none; |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, #e94560, #f39c12); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-primary:hover:not(:disabled) { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4); |
|
|
} |
|
|
|
|
|
.btn-primary:disabled { |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
color: #e4e4e4; |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.btn-secondary:hover { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.btn-success { |
|
|
background: linear-gradient(135deg, #28a745, #20c997); |
|
|
color: white; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.progress-section { |
|
|
display: none; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.progress-bar-container { |
|
|
height: 8px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 4px; |
|
|
overflow: hidden; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 100%; |
|
|
background: linear-gradient(135deg, #e94560, #f39c12); |
|
|
width: 0%; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.progress-text { |
|
|
font-size: 0.9rem; |
|
|
color: #8892b0; |
|
|
} |
|
|
|
|
|
.error-message { |
|
|
display: none; |
|
|
background: rgba(220, 53, 69, 0.1); |
|
|
border: 1px solid rgba(220, 53, 69, 0.3); |
|
|
border-radius: 10px; |
|
|
padding: 15px 20px; |
|
|
margin-bottom: 20px; |
|
|
color: #dc3545; |
|
|
} |
|
|
|
|
|
.success-message { |
|
|
display: none; |
|
|
background: rgba(40, 167, 69, 0.1); |
|
|
border: 1px solid rgba(40, 167, 69, 0.3); |
|
|
border-radius: 10px; |
|
|
padding: 15px 20px; |
|
|
margin-bottom: 20px; |
|
|
color: #28a745; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
50% { |
|
|
transform: scale(1.05); |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
100% { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<a href="/" class="back-button"> |
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<path d="M19 12H5M12 19l-7-7 7-7" /> |
|
|
</svg> |
|
|
Back to Tools |
|
|
</a> |
|
|
|
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<div class="logo">🖼️</div> |
|
|
<h1>Image Convert</h1> |
|
|
<p class="subtitle">Convert HEIC images to PNG/JPG format with ease</p> |
|
|
</div> |
|
|
|
|
|
<div class="tool-card"> |
|
|
<div class="info-box"> |
|
|
<span>ℹ️</span> |
|
|
<p>Upload images and convert them to your desired format. Supports batch conversion.</p> |
|
|
</div> |
|
|
|
|
|
<div id="error-message" class="error-message"></div> |
|
|
<div id="success-message" class="success-message"></div> |
|
|
|
|
|
<div class="upload-section" id="upload-section"> |
|
|
<div class="upload-icon">📤</div> |
|
|
<p class="upload-text">Drop images here or click to browse</p> |
|
|
<p class="upload-hint">Supports HEIC, JPG, PNG, WebP, TIFF, BMP</p> |
|
|
<input type="file" id="file-input" accept="image/*,.heic" multiple> |
|
|
</div> |
|
|
|
|
|
<div class="settings-section"> |
|
|
<h3 class="settings-title">⚙️ Conversion Settings</h3> |
|
|
<div class="settings-grid"> |
|
|
<div class="setting-group"> |
|
|
<label class="setting-label">Output Format</label> |
|
|
<select class="setting-input" id="output-format"> |
|
|
<option value="jpg">JPG</option> |
|
|
<option value="png">PNG</option> |
|
|
<option value="webp">WebP</option> |
|
|
<option value="svg">SVG</option> |
|
|
<option value="heic">HEIC</option> |
|
|
<option value="tiff">TIFF</option> |
|
|
<option value="bmp">BMP</option> |
|
|
<option value="gif">GIF</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="setting-group"> |
|
|
<label class="setting-label">Quality: <span id="quality-value">100</span>%</label> |
|
|
<input type="range" class="setting-input" id="quality-slider" min="1" max="100" value="100" |
|
|
style="padding: 0;"> |
|
|
</div> |
|
|
<div class="setting-group"> |
|
|
<label class="setting-label">Resize: <span id="scale-value">100</span>%</label> |
|
|
<input type="range" class="setting-input" id="scale-slider" min="10" max="100" value="100" |
|
|
step="10" style="padding: 0;"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="files-preview" id="files-preview" style="display: none;"> |
|
|
<h3 class="preview-title">📋 Selected Files</h3> |
|
|
<div class="files-grid" id="files-grid"></div> |
|
|
</div> |
|
|
|
|
|
<div class="progress-section" id="progress-section"> |
|
|
<div class="progress-bar-container"> |
|
|
<div class="progress-bar" id="progress-bar"></div> |
|
|
</div> |
|
|
<p class="progress-text" id="progress-text">0% complete</p> |
|
|
</div> |
|
|
|
|
|
<div class="action-buttons"> |
|
|
<button class="btn btn-primary" id="process-button" disabled> |
|
|
🔄 Convert Images |
|
|
</button> |
|
|
<button class="btn btn-secondary" id="clear-button"> |
|
|
🗑️ Clear All |
|
|
</button> |
|
|
<button class="btn btn-success" id="download-button"> |
|
|
💾 Download All |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function secret_sauce_url() { |
|
|
return '/image/convert'; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('quality-slider').addEventListener('input', function (e) { |
|
|
document.getElementById('quality-value').textContent = e.target.value; |
|
|
}); |
|
|
document.getElementById('scale-slider').addEventListener('input', function (e) { |
|
|
document.getElementById('scale-value').textContent = e.target.value; |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
