|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Remove Background - Tools Collection</title> |
|
|
<script src="/image/javascript/image.js"></script> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
min-height: 100vh; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1000px; |
|
|
margin: 0 auto; |
|
|
background: white; |
|
|
border-radius: 20px; |
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.header { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: white; |
|
|
padding: 40px 30px; |
|
|
text-align: center; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.back-button { |
|
|
position: absolute; |
|
|
left: 30px; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 12px 20px; |
|
|
border-radius: 50px; |
|
|
cursor: pointer; |
|
|
font-size: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
text-decoration: none; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.back-button:hover { |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
transform: translateY(-50%) translateX(-2px); |
|
|
} |
|
|
|
|
|
.header-content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 20px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.header-text h1 { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 10px; |
|
|
font-weight: 300; |
|
|
} |
|
|
|
|
|
.header-text p { |
|
|
font-size: 1.1rem; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.content { |
|
|
padding: 40px; |
|
|
} |
|
|
|
|
|
.upload-section { |
|
|
background: #f8f9fa; |
|
|
border-radius: 15px; |
|
|
padding: 40px; |
|
|
text-align: center; |
|
|
margin-bottom: 30px; |
|
|
border: 2px dashed #dee2e6; |
|
|
transition: all 0.3s ease; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.upload-section:hover { |
|
|
border-color: #667eea; |
|
|
background: #f0f4ff; |
|
|
} |
|
|
|
|
|
.upload-section.dragover { |
|
|
border-color: #667eea; |
|
|
background: #e8f2ff; |
|
|
transform: scale(1.02); |
|
|
} |
|
|
|
|
|
.upload-icon { |
|
|
font-size: 4rem; |
|
|
color: #667eea; |
|
|
margin-bottom: 20px; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.upload-text h3 { |
|
|
color: #495057; |
|
|
margin-bottom: 10px; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.upload-text p { |
|
|
color: #6c757d; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.upload-button { |
|
|
background: linear-gradient(135deg, #667eea, #764ba2); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 15px 30px; |
|
|
border-radius: 50px; |
|
|
font-size: 1.1rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); |
|
|
} |
|
|
|
|
|
.upload-button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); |
|
|
} |
|
|
|
|
|
.file-input { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.settings-section { |
|
|
background: white; |
|
|
border-radius: 15px; |
|
|
padding: 30px; |
|
|
margin-bottom: 30px; |
|
|
border: 1px solid #e9ecef; |
|
|
} |
|
|
|
|
|
.settings-title { |
|
|
color: #495057; |
|
|
font-size: 1.3rem; |
|
|
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: #495057; |
|
|
font-weight: 500; |
|
|
font-size: 0.95rem; |
|
|
} |
|
|
|
|
|
.setting-input { |
|
|
padding: 12px 15px; |
|
|
border: 2px solid #e9ecef; |
|
|
border-radius: 10px; |
|
|
font-size: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.setting-input:focus { |
|
|
outline: none; |
|
|
border-color: #667eea; |
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
|
|
} |
|
|
|
|
|
.files-preview { |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.preview-title { |
|
|
color: #495057; |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.files-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.file-card { |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
padding: 20px; |
|
|
border: 1px solid #e9ecef; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.file-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.file-preview { |
|
|
width: 100%; |
|
|
height: 120px; |
|
|
background: #f8f9fa; |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin-bottom: 15px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.file-preview img { |
|
|
max-width: 100%; |
|
|
max-height: 100%; |
|
|
object-fit: cover; |
|
|
border-radius: 8px; |
|
|
} |
|
|
|
|
|
.file-icon { |
|
|
font-size: 2rem; |
|
|
color: #667eea; |
|
|
} |
|
|
|
|
|
.file-info h4 { |
|
|
color: #495057; |
|
|
font-size: 0.9rem; |
|
|
margin-bottom: 5px; |
|
|
word-break: break-all; |
|
|
} |
|
|
|
|
|
.file-info p { |
|
|
color: #6c757d; |
|
|
font-size: 0.8rem; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.file-status { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: #28a745; |
|
|
} |
|
|
|
|
|
.status-indicator.processing { |
|
|
background: #ffc107; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
.status-indicator.error { |
|
|
background: #dc3545; |
|
|
} |
|
|
|
|
|
.remove-button { |
|
|
position: absolute; |
|
|
top: 10px; |
|
|
right: 10px; |
|
|
background: #dc3545; |
|
|
color: white; |
|
|
border: none; |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
border-radius: 50%; |
|
|
cursor: pointer; |
|
|
font-size: 0.8rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.remove-button:hover { |
|
|
background: #c82333; |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.progress-section { |
|
|
margin-top: 30px; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.progress-title { |
|
|
color: #495057; |
|
|
font-size: 1.2rem; |
|
|
margin-bottom: 15px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.progress-bar-container { |
|
|
background: #e9ecef; |
|
|
border-radius: 10px; |
|
|
height: 12px; |
|
|
overflow: hidden; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
background: linear-gradient(135deg, #28a745, #20c997); |
|
|
height: 100%; |
|
|
width: 0%; |
|
|
transition: width 0.3s ease; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.progress-text { |
|
|
color: #6c757d; |
|
|
font-size: 0.9rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.action-buttons { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
justify-content: center; |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.action-button { |
|
|
padding: 15px 30px; |
|
|
border: none; |
|
|
border-radius: 50px; |
|
|
font-size: 1.1rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
min-width: 150px; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.process-button { |
|
|
background: linear-gradient(135deg, #dc3545, #c82333); |
|
|
color: white; |
|
|
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3); |
|
|
} |
|
|
|
|
|
.process-button:hover:not(:disabled) { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4); |
|
|
} |
|
|
|
|
|
.process-button:disabled { |
|
|
opacity: 0.6; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.clear-button { |
|
|
background: #6c757d; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.clear-button:hover { |
|
|
background: #5a6268; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.download-button { |
|
|
background: linear-gradient(135deg, #007bff, #0056b3); |
|
|
color: white; |
|
|
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); |
|
|
} |
|
|
|
|
|
.download-button:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4); |
|
|
} |
|
|
|
|
|
.error-message { |
|
|
background: #f8d7da; |
|
|
color: #721c24; |
|
|
padding: 15px; |
|
|
border-radius: 10px; |
|
|
margin-bottom: 20px; |
|
|
border: 1px solid #f5c6cb; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.success-message { |
|
|
background: #d4edda; |
|
|
color: #155724; |
|
|
padding: 15px; |
|
|
border-radius: 10px; |
|
|
margin-bottom: 20px; |
|
|
border: 1px solid #c3e6cb; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.info-box { |
|
|
background: #d1ecf1; |
|
|
color: #0c5460; |
|
|
padding: 15px; |
|
|
border-radius: 10px; |
|
|
margin-bottom: 20px; |
|
|
border: 1px solid #bee5eb; |
|
|
} |
|
|
|
|
|
.info-box h4 { |
|
|
margin-bottom: 8px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.info-box p { |
|
|
font-size: 0.9rem; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.metadata-modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
background: white; |
|
|
padding: 30px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); |
|
|
z-index: 9999; |
|
|
max-width: 90%; |
|
|
max-height: 80%; |
|
|
overflow: auto; |
|
|
word-wrap: break-word |
|
|
} |
|
|
|
|
|
.metadata-content { |
|
|
white-space: pre-wrap; |
|
|
margin-top: 15px; |
|
|
} |
|
|
|
|
|
.modal-backdrop { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
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; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.header-content { |
|
|
flex-direction: column; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.header-text h1 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.back-button { |
|
|
position: static; |
|
|
transform: none; |
|
|
margin-bottom: 20px; |
|
|
align-self: flex-start; |
|
|
} |
|
|
|
|
|
.content { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.action-buttons { |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<a href="/" class="back-button"> |
|
|
← Back to Tools |
|
|
</a> |
|
|
|
|
|
<div class="header-content"> |
|
|
<div class="header-text"> |
|
|
<h1>Remove Background</h1> |
|
|
<p>Automatically remove backgrounds from your images using AI</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="content"> |
|
|
<div class="error-message" id="error-message"></div> |
|
|
<div class="success-message" id="success-message"></div> |
|
|
|
|
|
<div class="info-box"> |
|
|
<h4>🎯 Background Removal Tool</h4> |
|
|
<p>Upload your images and our AI will automatically detect and remove the background, leaving you with a transparent PNG perfect for design work, presentations, or e-commerce.</p> |
|
|
</div> |
|
|
|
|
|
<div class="upload-section" id="upload-section"> |
|
|
<span class="upload-icon">🖼️</span> |
|
|
<div class="upload-text"> |
|
|
<h3>Drop your images here</h3> |
|
|
<button class="upload-button"> |
|
|
Choose Files |
|
|
</button> |
|
|
</div> |
|
|
<input type="file" id="file-input" class="file-input" multiple accept="image/*"> |
|
|
</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"> |
|
|
<h3 class="progress-title"> |
|
|
🔄 Processing Images... |
|
|
</h3> |
|
|
<div class="progress-bar-container"> |
|
|
<div class="progress-bar" id="progress-bar"></div> |
|
|
</div> |
|
|
<div class="progress-text" id="progress-text">0% complete</div> |
|
|
</div> |
|
|
|
|
|
<div class="action-buttons"> |
|
|
<button class="action-button process-button" id="process-button" disabled> |
|
|
✂️ Remove Background |
|
|
</button> |
|
|
<button class="action-button clear-button" id="clear-button"> |
|
|
🗑️ Clear All |
|
|
</button> |
|
|
<button class="action-button download-button" id="download-button" style="display: none;"> |
|
|
💾 Download All |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function secret_sauce_url() { |
|
|
return '/image/remove_background'; |
|
|
} |
|
|
</script> |
|
|
<div id="metadata-modal" class="metadata-modal"> |
|
|
<button onclick="closeMetadataModal()" class="remove-button">×</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> |
