datbogie.github.io/level-view.html at main · DatBogie/datbogie.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Level View - Dat Bogie</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./level-view.css">
</head>
<body>
    <div class="blur-bg"></div>
    <div id="hide-pointer"></div>
    <img src="cursor.svg" class="cursor" width="35px">
    <div class="if-popup">
        <div class="if-bar">
            <button id="if-close"></button>
            <div>
                <a id="if-url"></a>
            </div>
            <button id="if-open"></button>
        </div>
        <iframe></iframe>
    </div>
    <div class="content" style="flex-wrap: wrap;">
        <div>
            <div>
                <span class="h1" id="title">Title</span><br>
                <span id="artist">Artist</span>
                <hr>
                <div style="margin-top: 14px;" class="tag-container" id="links">
                    <div class="tag link" id="template-link">
                        <div class="tag-icon"><img></div>
                        <span class="tag-label"></span>
                    </div>
                </div>
                <h1 style="margin-top: 14px; margin-bottom: 14px;">Tags:</h1>
                <div class="tag-container" id="tags">
                    <div class="tag" id="template-tag">
                        <div class="tag-icon"></div>
                        <span class="tag-label">Tag</span>
                    </div>
                </div>
            </div>
            <div style="display: flex; justify-content: center; align-items: center;">
                <img src="https://placehold.co/1000x1000/png" class="level-icon" id="icon" title="Click to view raw image">
                <div class="carousel-controls">
                    <button id="left">&lt;</button>
                    <span id="label"> 0 / 0 </span>
                    <button id="right">&gt;</button>
                </div>
            </div>
        </div>
        <div class="video-container">
            <h1 style="margin-top: 0; margin-bottom: 0;">Video Showcase</h1>
            <hr>
            <p style="margin-bottom: 0;"><iframe class="video" id="video" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
        </div>
    </div>
</body>
<script type="module" src="./level-view.js"></script>
</html>