148 lines
4.7 KiB
HTML
148 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>🧪 Test Transparency - 5 Sample Images</title>
|
|
<style>
|
|
body {
|
|
background: #1a1a2e;
|
|
color: white;
|
|
font-family: Arial, sans-serif;
|
|
padding: 30px;
|
|
}
|
|
h1 {
|
|
color: #ff4444;
|
|
text-align: center;
|
|
}
|
|
.comparison {
|
|
display: flex;
|
|
gap: 40px;
|
|
margin: 30px 0;
|
|
padding: 20px;
|
|
background: rgba(0,0,0,0.3);
|
|
border-radius: 15px;
|
|
}
|
|
.image-box {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
.image-box h3 {
|
|
color: #ff6666;
|
|
margin-bottom: 15px;
|
|
}
|
|
.image-box img {
|
|
max-width: 300px;
|
|
max-height: 300px;
|
|
border: 2px solid #333;
|
|
border-radius: 10px;
|
|
}
|
|
/* Checkerboard background for transparency */
|
|
.transparent-bg {
|
|
background: linear-gradient(45deg, #333 25%, transparent 25%),
|
|
linear-gradient(-45deg, #333 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, #333 75%),
|
|
linear-gradient(-45deg, transparent 75%, #333 75%);
|
|
background-size: 20px 20px;
|
|
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
|
background-color: #555;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
.label {
|
|
margin-top: 10px;
|
|
font-size: 0.9em;
|
|
color: #aaa;
|
|
}
|
|
.success { color: #44ff44; }
|
|
.info {
|
|
text-align: center;
|
|
color: #888;
|
|
margin-bottom: 30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🧪 Test Transparency - Before & After</h1>
|
|
<p class="info">Left: Original (white/black background) | Right: Processed (transparent with checkerboard)</p>
|
|
|
|
<div class="comparison">
|
|
<div class="image-box">
|
|
<h3>📷 ORIGINAL</h3>
|
|
<img src="watering_can_ORIGINAL.png" alt="Original">
|
|
<div class="label">watering_can_ORIGINAL.png</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3 class="success">✅ PROCESSED</h3>
|
|
<div class="transparent-bg">
|
|
<img src="watering_can_PROCESSED.png" alt="Processed">
|
|
</div>
|
|
<div class="label">watering_can_PROCESSED.png</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="image-box">
|
|
<h3>📷 ORIGINAL</h3>
|
|
<img src="horse_ORIGINAL.png" alt="Original">
|
|
<div class="label">horse_ORIGINAL.png</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3 class="success">✅ PROCESSED</h3>
|
|
<div class="transparent-bg">
|
|
<img src="horse_PROCESSED.png" alt="Processed">
|
|
</div>
|
|
<div class="label">horse_PROCESSED.png</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="image-box">
|
|
<h3>📷 ORIGINAL</h3>
|
|
<img src="manure_pile_ORIGINAL.png" alt="Original">
|
|
<div class="label">manure_pile_ORIGINAL.png</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3 class="success">✅ PROCESSED</h3>
|
|
<div class="transparent-bg">
|
|
<img src="manure_pile_PROCESSED.png" alt="Processed">
|
|
</div>
|
|
<div class="label">manure_pile_PROCESSED.png</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="image-box">
|
|
<h3>📷 ORIGINAL</h3>
|
|
<img src="pickaxe_ORIGINAL.png" alt="Original">
|
|
<div class="label">pickaxe_ORIGINAL.png</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3 class="success">✅ PROCESSED</h3>
|
|
<div class="transparent-bg">
|
|
<img src="pickaxe_PROCESSED.png" alt="Processed">
|
|
</div>
|
|
<div class="label">pickaxe_PROCESSED.png</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="image-box">
|
|
<h3>📷 ORIGINAL</h3>
|
|
<img src="walk_ORIGINAL.png" alt="Original">
|
|
<div class="label">walk_ORIGINAL.png</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3 class="success">✅ PROCESSED</h3>
|
|
<div class="transparent-bg">
|
|
<img src="walk_PROCESSED.png" alt="Processed">
|
|
</div>
|
|
<div class="label">walk_PROCESSED.png</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="info" style="margin-top: 40px;">
|
|
If you see the gray checkerboard pattern behind the processed images, transparency is working! 🎉
|
|
</p>
|
|
</body>
|
|
</html>
|