65994816ab
- Add console logging to track result data in AIAnalysisPanel - Add debugging to ScreenshotGallery rendering conditions - Track screenshot data flow and component render states - Help identify why gallery preview/enlargement not working
125 lines
3.6 KiB
HTML
125 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test Screenshot Gallery</title>
|
|
<style>
|
|
body {
|
|
background: #111;
|
|
color: white;
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
}
|
|
.gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.screenshot {
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
.screenshot img {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
}
|
|
.screenshot:hover {
|
|
border-color: #666;
|
|
}
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.8);
|
|
z-index: 1000;
|
|
}
|
|
.modal img {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
}
|
|
.close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
color: white;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Screenshot Gallery Test</h1>
|
|
<p>Testing direct screenshot access:</p>
|
|
|
|
<div class="gallery">
|
|
<div class="screenshot">
|
|
<img src="/screenshots/SOLUSD_240_ai_1752447978639.png" alt="SOLUSD 4h">
|
|
<div style="padding: 10px;">SOLUSD - 4h Timeframe</div>
|
|
</div>
|
|
<div class="screenshot">
|
|
<img src="/screenshots/SOLUSD_15_ai_1752441315672.png" alt="SOLUSD 15m">
|
|
<div style="padding: 10px;">SOLUSD - 15m Timeframe</div>
|
|
</div>
|
|
<div class="screenshot">
|
|
<img src="/screenshots/SOLUSD_5_ai_1752441274081.png" alt="SOLUSD 5m">
|
|
<div style="padding: 10px;">SOLUSD - 5m Timeframe</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal" class="modal">
|
|
<span class="close">×</span>
|
|
<img id="modalImg" src="" alt="">
|
|
</div>
|
|
|
|
<script>
|
|
const screenshots = document.querySelectorAll('.screenshot img');
|
|
const modal = document.getElementById('modal');
|
|
const modalImg = document.getElementById('modalImg');
|
|
const close = document.querySelector('.close');
|
|
|
|
screenshots.forEach(img => {
|
|
img.addEventListener('click', function() {
|
|
modal.style.display = 'block';
|
|
modalImg.src = this.src;
|
|
console.log('Image clicked:', this.src);
|
|
});
|
|
|
|
img.addEventListener('load', function() {
|
|
console.log('Image loaded:', this.src);
|
|
});
|
|
|
|
img.addEventListener('error', function() {
|
|
console.error('Image failed to load:', this.src);
|
|
this.style.border = '2px solid red';
|
|
});
|
|
});
|
|
|
|
close.addEventListener('click', function() {
|
|
modal.style.display = 'none';
|
|
});
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
modal.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
modal.addEventListener('click', function(e) {
|
|
if (e.target === modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|