|
<!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 class="textbox-icon" id="textboxIcon"> |
|
<img src="textbox-icon.png" alt="Textbox Icon"> |
|
<span>Textbox</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 class="textbox-layer" id="textboxLayer" style="display: none; transform: translateX(100%);"> |
|
<div id="textboxContent"></div> |
|
</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 src="script.js"></script> |
|
</body> |
|
</html> |
|
|
