Hugging Face's logo

Spaces:
eaglelandsonce
/
layered_presentation
Running

App Files Community
layered_presentation
File size: 2,547 Bytes 
4dec4fd
4d46e65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6f8e4a4
 
 
 
4d46e65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4dec4fd
6f8e4a4
 
4d46e65
 
 
 
 
 
 
 
54a5198
4d46e65
ecd633f
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<!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>
    <!-- Sidebar -->
    <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>

    <!-- Main Container -->
    <div class="container">
        <div class="top-bar">
            <div class="nav-buttons">
                <button id="prev-btn">&#8592; Previous</button>
                <button id="next-btn">Next &#8594;</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">&times;</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>