|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Remove Metadata - 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; |
|
|
} |
|
|
|
|
|
.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; |
|
|
} |
|
|
|
|
|
|
|
|
.metadata-modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
background: #16213e; |
|
|
padding: 30px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); |
|
|
z-index: 9999; |
|
|
max-width: 90%; |
|
|
max-height: 80%; |
|
|
overflow: auto; |
|
|
word-wrap: break-word; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
color: #e4e4e4; |
|
|
} |
|
|
|
|
|
.metadata-content { |
|
|
white-space: pre-wrap; |
|
|
margin-top: 15px; |
|
|
font-family: monospace; |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
padding: 15px; |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
.modal-backdrop { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
z-index: 9998; |
|
|
} |
|
|
|
|
|
@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>Remove Metadata</h1> |
|
|
<p class="subtitle">Strip EXIF data and metadata from your images for privacy</p> |
|
|
</div> |
|
|
|
|
|
<div class="tool-card"> |
|
|
<div class="info-box"> |
|
|
<span>ℹ️</span> |
|
|
<p>This tool removes metadata including GPS location, camera settings, timestamps, and other sensitive |
|
|
information from your images while preserving image quality.</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 JPG, PNG, WebP, HEIC, TIFF</p> |
|
|
<input type="file" id="file-input" accept="image/*,.heic" multiple> |
|
|
</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> |
|
|
🔒 Remove Metadata |
|
|
</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/remove_metadata'; |
|
|
} |
|
|
</script> |
|
|
|
|
|
<div id="metadata-modal" class="metadata-modal"> |
|
|
<button onclick="closeMetadataModal()" class="remove-button" |
|
|
style="position: absolute; top: 10px; right: 10px;">×</button> |
|
|
<h3>Removed Metadata</h3> |
|
|
<pre id="metadata-content" class="metadata-content"></pre> |
|
|
</div> |
|
|
<div id="modal-backdrop" class="modal-backdrop" onclick="closeMetadataModal()"></div> |
|
|
|
|
|
</body> |
|
|
|
|
|
</html> |
