226 lines
7.1 KiB
HTML
226 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>🟢 Green Screen Test</title>
|
|
<style>
|
|
body {
|
|
background: #1a1a2e;
|
|
color: white;
|
|
font-family: Arial, sans-serif;
|
|
padding: 30px;
|
|
}
|
|
h1 { color: #00ff00; text-align: center; text-shadow: 2px 2px #000; }
|
|
.note {
|
|
background: #00ff00;
|
|
color: black;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
font-weight: bold;
|
|
}
|
|
.comparison {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin: 25px 0;
|
|
padding: 20px;
|
|
background: rgba(0,0,0,0.4);
|
|
border-radius: 15px;
|
|
align-items: center;
|
|
}
|
|
.image-box {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
.image-box h3 { color: #aaa; margin-bottom: 10px; font-size: 0.9em; }
|
|
.image-box img {
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
border-radius: 8px;
|
|
border: 2px solid #333;
|
|
}
|
|
.green-bg {
|
|
background: #00ff00;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
.checker-bg {
|
|
background: linear-gradient(45deg, #333 25%, #555 25%, #555 50%, #333 50%, #333 75%, #555 75%);
|
|
background-size: 16px 16px;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
.grass-bg {
|
|
background: linear-gradient(to bottom, #4a7c23, #2d4d15);
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
.label { font-size: 0.75em; color: #666; margin-top: 5px; }
|
|
.highlight { color: #00ff00; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🟢 GREEN SCREEN WORKFLOW</h1>
|
|
<div class="note">
|
|
Workflow: Original → AI Remove BG → Green Screen (#00FF00) → Alpha Transparency
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="image-box">
|
|
<h3>📷 ORIGINAL</h3>
|
|
<div class="checker-bg">
|
|
<img src="watering_can_ORIGINAL.png" alt="Original">
|
|
</div>
|
|
<div class="label">Source file</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3 class="highlight">🟢 GREEN SCREEN</h3>
|
|
<div class="green-bg">
|
|
<img src="watering_can_GREEN.png" alt="Green">
|
|
</div>
|
|
<div class="label">#00FF00 background</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3>✅ ALPHA (Checker)</h3>
|
|
<div class="checker-bg">
|
|
<img src="watering_can_ALPHA.png" alt="Alpha">
|
|
</div>
|
|
<div class="label">Transparent</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3>🌿 IN GAME</h3>
|
|
<div class="grass-bg">
|
|
<img src="watering_can_ALPHA.png" alt="Game">
|
|
</div>
|
|
<div class="label">On grass</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="image-box">
|
|
<h3>📷 ORIGINAL</h3>
|
|
<div class="checker-bg">
|
|
<img src="horse_ORIGINAL.png" alt="Original">
|
|
</div>
|
|
<div class="label">Source file</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3 class="highlight">🟢 GREEN SCREEN</h3>
|
|
<div class="green-bg">
|
|
<img src="horse_GREEN.png" alt="Green">
|
|
</div>
|
|
<div class="label">#00FF00 background</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3>✅ ALPHA (Checker)</h3>
|
|
<div class="checker-bg">
|
|
<img src="horse_ALPHA.png" alt="Alpha">
|
|
</div>
|
|
<div class="label">Transparent</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3>🌿 IN GAME</h3>
|
|
<div class="grass-bg">
|
|
<img src="horse_ALPHA.png" alt="Game">
|
|
</div>
|
|
<div class="label">On grass</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="image-box">
|
|
<h3>📷 ORIGINAL</h3>
|
|
<div class="checker-bg">
|
|
<img src="manure_pile_ORIGINAL.png" alt="Original">
|
|
</div>
|
|
<div class="label">Source file</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3 class="highlight">🟢 GREEN SCREEN</h3>
|
|
<div class="green-bg">
|
|
<img src="manure_pile_GREEN.png" alt="Green">
|
|
</div>
|
|
<div class="label">#00FF00 background</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3>✅ ALPHA (Checker)</h3>
|
|
<div class="checker-bg">
|
|
<img src="manure_pile_ALPHA.png" alt="Alpha">
|
|
</div>
|
|
<div class="label">Transparent</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3>🌿 IN GAME</h3>
|
|
<div class="grass-bg">
|
|
<img src="manure_pile_ALPHA.png" alt="Game">
|
|
</div>
|
|
<div class="label">On grass</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="image-box">
|
|
<h3>📷 ORIGINAL</h3>
|
|
<div class="checker-bg">
|
|
<img src="pickaxe_ORIGINAL.png" alt="Original">
|
|
</div>
|
|
<div class="label">Source file</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3 class="highlight">🟢 GREEN SCREEN</h3>
|
|
<div class="green-bg">
|
|
<img src="pickaxe_GREEN.png" alt="Green">
|
|
</div>
|
|
<div class="label">#00FF00 background</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3>✅ ALPHA (Checker)</h3>
|
|
<div class="checker-bg">
|
|
<img src="pickaxe_ALPHA.png" alt="Alpha">
|
|
</div>
|
|
<div class="label">Transparent</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3>🌿 IN GAME</h3>
|
|
<div class="grass-bg">
|
|
<img src="pickaxe_ALPHA.png" alt="Game">
|
|
</div>
|
|
<div class="label">On grass</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison">
|
|
<div class="image-box">
|
|
<h3>📷 ORIGINAL</h3>
|
|
<div class="checker-bg">
|
|
<img src="walk_ORIGINAL.png" alt="Original">
|
|
</div>
|
|
<div class="label">Source file</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3 class="highlight">🟢 GREEN SCREEN</h3>
|
|
<div class="green-bg">
|
|
<img src="walk_GREEN.png" alt="Green">
|
|
</div>
|
|
<div class="label">#00FF00 background</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3>✅ ALPHA (Checker)</h3>
|
|
<div class="checker-bg">
|
|
<img src="walk_ALPHA.png" alt="Alpha">
|
|
</div>
|
|
<div class="label">Transparent</div>
|
|
</div>
|
|
<div class="image-box">
|
|
<h3>🌿 IN GAME</h3>
|
|
<div class="grass-bg">
|
|
<img src="walk_ALPHA.png" alt="Game">
|
|
</div>
|
|
<div class="label">On grass</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|