|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Interactive Layered Presentation</title> |
|
<link rel="stylesheet" href="style.css"> |
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
|
</head> |
|
<body> |
|
|
|
<div class="sidebar"> |
|
<div class="prompt-icon" id="promptIcon"> |
|
<img src="prompt-icon.png" alt="Prompt Icon"> |
|
<span>Prompt</span> |
|
</div> |
|
<div class="video-icon" id="videoIcon"> |
|
<img src="video-icon.png" alt="Video Icon"> |
|
<span>Video</span> |
|
</div> |
|
<div class="website-icon" id="websiteIcon"> |
|
<img src="website-icon.png" alt="Website Icon"> |
|
<span>Website</span> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="container"> |
|
<div class="top-bar"> |
|
<div class="nav-buttons"> |
|
<button id="prev-btn">← Previous</button> |
|
<button id="next-btn">Next →</button> |
|
</div> |
|
<h1 id="slide-title">Interactive Presentation</h1> |
|
</div> |
|
<div class="main"> |
|
<div class="content"> |
|
<img id="slide-image" src="images/01_mg.png" alt="Slide Image"> |
|
<div class="prompt-box" id="promptBox"> |
|
<textarea id="promptText"></textarea> |
|
<button id="queryButton">Query</button> |
|
</div> |
|
<div class="response-box" id="responseBox"> |
|
<div id="responseContent"></div> |
|
</div> |
|
<div class="website-layer" id="websiteLayer" style="display: none;"> |
|
<iframe id="websiteFrame" src="" frameborder="0"></iframe> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="video-overlay" id="videoOverlay" style="display: none;"> |
|
<iframe id="videoPlayer" src="" allowfullscreen></iframe> |
|
<button class="close-button" id="closeVideo">×</button> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
const slideTitle = document.getElementById('slide-title'); |
|
const slideImage = document.getElementById('slide-image'); |
|
const prevBtn = document.getElementById('prev-btn'); |
|
const nextBtn = document.getElementById('next-btn'); |
|
const promptBox = document.getElementById('promptBox'); |
|
const promptText = document.getElementById('promptText'); |
|
const responseBox = document.getElementById('responseBox'); |
|
const responseContent = document.getElementById('responseContent'); |
|
const promptIcon = document.getElementById('promptIcon'); |
|
const videoIcon = document.getElementById('videoIcon'); |
|
const videoOverlay = document.getElementById('videoOverlay'); |
|
const videoPlayer = document.getElementById('videoPlayer'); |
|
const closeVideo = document.getElementById('closeVideo'); |
|
const queryButton = document.getElementById('queryButton'); |
|
const websiteIcon = document.getElementById('websiteIcon'); |
|
const websiteLayer = document.getElementById('websiteLayer'); |
|
const websiteFrame = document.getElementById('websiteFrame'); |
|
|
|
let slides = []; |
|
let currentIndex = 0; |
|
let websiteVisible = false; |
|
|
|
async function fetchSlides() { |
|
try { |
|
const response = await fetch('config.json'); |
|
const data = await response.json(); |
|
slides = data.slides; |
|
loadSlide(currentIndex); |
|
} catch (error) { |
|
console.error('Error loading slides:', error); |
|
} |
|
} |
|
|
|
function loadSlide(index) { |
|
if (!slides.length) return; |
|
const slide = slides[index]; |
|
slideTitle.textContent = slide.id.replace('_', ' '); |
|
slideImage.src = slide.image; |
|
promptBox.style.display = 'none'; |
|
responseBox.style.display = 'none'; |
|
responseContent.innerHTML = ''; |
|
videoPlayer.src = ''; |
|
if (websiteVisible) { |
|
toggleWebsiteLayer(); |
|
} |
|
} |
|
|
|
function toggleWebsiteLayer() { |
|
if (websiteVisible) { |
|
websiteLayer.style.display = 'none'; |
|
websiteFrame.src = ''; |
|
} else { |
|
const websiteURL = "https://chatgpt.com/g/g-mYPbdl190-finstart-devops"; |
|
websiteFrame.src = websiteURL; |
|
websiteLayer.style.display = 'block'; |
|
} |
|
websiteVisible = !websiteVisible; |
|
} |
|
|
|
prevBtn.addEventListener('click', () => { |
|
currentIndex = (currentIndex - 1 + slides.length) % slides.length; |
|
loadSlide(currentIndex); |
|
}); |
|
|
|
nextBtn.addEventListener('click', () => { |
|
currentIndex = (currentIndex + 1) % slides.length; |
|
loadSlide(currentIndex); |
|
}); |
|
|
|
promptIcon.addEventListener('click', () => { |
|
const slideText = slides[currentIndex]?.text || "No prompt text available."; |
|
promptBox.style.display = promptBox.style.display === 'block' ? 'none' : 'block'; |
|
promptText.value = slideText; |
|
}); |
|
|
|
videoIcon.addEventListener('click', () => { |
|
const videoURL = slides[currentIndex]?.video || ''; |
|
if (videoURL) { |
|
videoPlayer.src = videoURL; |
|
videoOverlay.style.display = 'flex'; |
|
} |
|
}); |
|
|
|
closeVideo.addEventListener('click', () => { |
|
videoOverlay.style.display = 'none'; |
|
videoPlayer.src = ''; |
|
}); |
|
|
|
websiteIcon.addEventListener('click', toggleWebsiteLayer); |
|
|
|
queryButton.addEventListener('click', async () => { |
|
const userPrompt = promptText.value.trim(); |
|
if (!userPrompt) return; |
|
responseBox.style.display = "block"; |
|
responseContent.innerHTML = "Processing..."; |
|
setTimeout(() => { |
|
responseContent.innerHTML = "Response received: " + userPrompt; |
|
}, 2000); |
|
}); |
|
|
|
fetchSlides(); |
|
</script> |
|
</body> |
|
</html> |
|
|
|
|
