datbogie.github.io/index.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dat Bogie</title>
    <meta property="og:title" content="Dat Bogie">
    <meta property="og:type" content="website">
    <meta property="og:image" content="/assets/pfp.jpg">
    <meta property="og:url" content="https://datbogie.org">
    <meta property="og:description" content="ADOFAI Levels, Games, & More.">
    <link rel="icon" type="image/x-icon" href="./favicon.png">
    <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="style.css">
</head>
<body>
    <div class="blur-bg"></div>
    <div id="hide-pointer"></div>
    <img src="cursor.svg" class="cursor" width="35px">
    <div id="loading">
        <div class="loading-center">
            <div id="loading-circle"></div>
        </div>
        <span id="loading-text"><i>Loading</i><span class="loading-dot">.</span><span class="loading-dot">.</span><span class="loading-dot">.</span></span>
    </div>
    <div id="level-filter-popup" class="closed">
        <div style="overflow: scroll; width: 100%; height: 100%;">
            <span class="title" style="margin-top: 2.5%; text-align: center;">Filter Tags</span>
            <hr style="margin-left: 5%; margin-right: 5%; margin-top: 0;">
            <div id="pointer" style="position: absolute; top: 0; left: 100%; width: 0; height: 0; border: solid 20px; border-color: transparent transparent transparent var(--mantle);"></div>
            <div class="level-filter-popup-controls">
                <button id="all-tags">Toggle All</button>
                <button id="invert-tags">Invert Selection</button>
                <button id="tag-filter-type">Filter Type: ${type}</button>
            </div>
            <div class="filter-tags">
                <div class="filter-category details open" id="template-category">
                    <button class="summary" id="filter-category-title">Category</button>
                    <div class="content">
                        <div class="filter-tag" id="template-tag">
                            <input id="enabled" type="checkbox">
                            <div class="tag-icon"></div>
                            <span class="tag-label">Tag</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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="display" id="tabbar">
        <div class="display" id="tabbar-bg">
            <button id="t-1" class="display tabbtn">Home</button>
            <button id="t-2" class="display tabbtn">ADOFAI</button>
            <button id="t-3" class="display tabbtn">Games</button>
            <button id="t-4" class="display tabbtn" disabled>Software</button>
        </div>
    </div>
    <div class="display tabpage" id="tab.t-1">
        <div class="display main-title">
            <h1>Home</h1>
            <hr class="expanding-hr">
        </div>
        <h2 style="margin-bottom: 0;">About Me</h2>
        <p style="margin-top: 0;">
            I'm Dat Bogie (she/her), an amateur software dev, game dev, and ADOFAI VFXer!<br>
            I am <a href="https://lgbtqia.wiki/wiki/Panrose">Panrose <img width="24" src="./assets/flags/flag_pansexual.png"></a>, <a href="https://lgbtqia.wiki/wiki/Transgender">Trans <img width="24" src="./assets/flags/flag_trans.png"></a>, <a href="https://lgbtqia.wiki/wiki/Demiromantic">Demiromantic <img width="24" src="./assets/flags/demiromantic_flag.png"></a>, & <a href="https://lgbtqia.wiki/wiki/Aceflux">Aceflux <img width="24" src="./assets/flags/aceflux_flag.png"></a>.<br>
            I (rather unfortunately) live in the U.S.
        </p>
        <h2 style="margin-bottom: 0;">My Accounts</h2>
        <div style="margin-top: 14px;" class="link-container" id="links">
            <div class="tag link functional-a" id="template-link">
                <div class="link-icon"><img><span class="link-label">Link</span></div>
            </div>
        </div>
        <h2 style="margin-bottom: 0;">About This Site</h2>
        <p style="margin-top: 0;">
            This site <s>contains</s> <i>will</i> contain information about all of my projects; from games and software, to ADOFAI levels and more.<br>
            Click through the tabs at the top to explore!
        </p>
        <p>
            Color palette: <span class="link" data-href="https://catppuccin.com/palette/">Catppuccin Macchiato</span>.<br>
            Card rotating effect: <a href="https://armandocanals.com/posts/CSS-transform-rotating-a-3D-object-perspective-based-on-mouse-position.html">Armando Canals</a>.<br>
            JSZip: <a href="https://stuk.github.io/jszip/">Stuart Knightley</a>.<br>
            Website Repository: <a href="https://github.com/DatBogie/datbogie.github.io">GitHub</a>.<br>
            <b style="font-size: 1rem"><i>If you own any songs used in my ADOFAI Levels and would like me to take down the downloads for them, please <a href="mailto:datbogie@datbogie.org">e-mail me</a> at</i> <code>datbogie@datbogie.org</code><i>!</i></b>
        </p>
        <hr class="expanding-hr">
    </div>
    <div class="display tabpage" id="tab.t-2">
        <div class="display main-title">
            <h1>ADOFAI</h1>
            <hr class="expanding-hr">
        </div>
        <blockquote>
            A Dance of Fire and Ice is a strict rhythm game. Keep your focus as you guide two orbiting planets along a winding path without breaking their perfect equilibrium.
        </blockquote>
        <p>
            <i>― ADOFAI's <a href="https://store.steampowered.com/app/977950/A_Dance_of_Fire_and_Ice/">Steam Page</a></i>
        </p>
        <p>
            ADOFAI is one of my favorite games of all time, and certainly my favorite rhythm game of all time.
            It also happens to include my favorite level editor of all time; it's simple and intuitive, yet immensely powerful.
            People are able to create absolutely breathtaking visuals with it. I hope one day to be among them.
        </p>
        <p>
            But, for now, my rather mediocre–decent-enough levels will have to do. Here they are, for your viewing and playing pleasure.
        </p>
        <div>
            <button id="open-adofai" class="functional-link" title="Useless; doesn't include latest levels.&#13;This is just here for my nostalgia's sake." data-href="adofai-level-browser-legacy.html">Open ADOFAI Level Browser (Legacy)</button>
            <button id="skip-adofai" disabled style="display: none;">Skip to Gallery</button>
        </div>
        <hr class="expanding-hr">
        <div>
            <button id="dl-adofai">Download Selected Levels</button>
            <button id="adofai-select-all">Select All</button>
            <button id="adofai-deselect-all">Deselect All</button>
            <!-- <button id="compact-adofai">Compact View</button> -->
        </div>
        <div style="margin-top: 7px;">
            <button id="featured-adofai">Show Featured Only</button>
            <button id="compact-adofai">Compact View</button>
            <button id="expand-adofai">Expand View</button>
        </div>
        <div style="margin-top: 7px;">
            <input placeholder="Type to filter..." id="level-search" title="Type here to filter by title/artist">
            <button id="level-search-clear">Clear</button>
            <button id="level-search-tags">Tags</button>
        </div>
        <div class="card-container" id="level-cards">
            <div class="level-card" id="level-card-template">
                <div><div class="card-highlight"></div></div>
                <b class="title">Title</b><br><span class="subtext">Artist</span><hr>
                <div style="position: relative;">
                    <div title="Seizure Warning!" class="level-card-icon-container"><img id="seizure-warning" class="level-card-icon" src="./seizure-warning.svg"></div>
                    <img loading="lazy" title="Easy" id="difficulty-indicator" class="level-card-icon" src="./assets/diff-indicators/Easy.svg">
                    <img loading="lazy" src="https://placehold.co/1000x1000/png" class="level-icon">
                </div>
                <div class="card-tags">
                    <div class="tag-icon card-tag" id="card-tag-template" title="${TagName}"></div>
                </div>
                <div>
                    <div class="div-button functional-link" data-disableclick="true" id="dl-new" title="Download from assets.datbogie.org.&#13;Use GDrive if this isn't working.">Download</div>
                    <div class="div-button functional-link" data-disableclick="true" id="dl" title="Download from Google Drive.&#13;Use if the normal link isn't working.">GD</div>
                    <div class="div-button functional-link" data-disableclick="true" id="exp" title="View more information about this level.">Expand</div>
                </div>
            </div>
        </div>
        <hr class="expanding-hr">
    </div>
    <div class="display tabpage" id="tab.t-3">
        <div class="display main-title">
            <h1>Games</h1>
            <hr class="expanding-hr">
        </div>
        <p class="game-container">
            <h2 style="margin-bottom: 0;">Planets Dance</h2>
            <div style="margin-top: 14px;" class="link-container game-links-container">
                <div class="tag link functional-a" title="Planets Dance 🎵 (ADOFAI) [Alpha]" data-href="https://www.roblox.com/games/100040746729229/Planets-Dance">
                    <div class="link-icon fetch-link-icon"><img><span class="link-label">Game</span></div>
                </div>
                <div class="tag link functional-a" title="Planets Dance (ADOFAI) - Dev Place" data-href="https://www.roblox.com/games/72629262497041/Planets-Dance-Dev-Place">
                    <div class="link-icon fetch-link-icon"><img><span class="link-label">Dev Place</span></div>
                </div>
            </div>
            <div style="margin-top: 14px;" class="link-container devs-container">
                <div class="tag link functional-a" title="@RobloxIsAwesome20181 | Programmer" data-href="https://roblox.com/users/479943271/profile">
                    <div class="link-icon fetch-link-icon"><img><span class="link-label">Dat Bogie</span></div>
                </div>
                <div class="tag link functional-a" title="@Havudanny13 | Artist" data-href="https://roblox.com/users/1176745691/profile">
                    <div class="link-icon fetch-link-icon"><img><span class="link-label">JM_Gaming</span></div>
                </div>
                <div class="vl"></div>
                <div class="tag link functional-a" title="Development Group" data-href="https://roblox.com/communities/17161898/x">
                    <div class="link-icon fetch-link-icon"><img><span class="link-label">PROJECT DΣNTΔ</span></div>
                </div>
            </div>
            <img class="game-image" style="margin-top: 14px;" src="https://tr.rbxcdn.com/180DAY-3b666fdc3792f6d9a401ef7afd200d4d/768/432/Image/Webp/noFilter">
            <p>
                Planets Dance is a re-creation of <a href="https://store.steampowered.com/app/977950/">A Dance of Fire and Ice</a> by <a href="https://7thbe.at">7th Beat Games</a> in Roblox.
            </p>
            <h3 style="margin-bottom: 0;">Statistics <i style="font-weight: normal; font-size: 1rem;">(Updated on 3/15/26)</i></h3>
            <ul style="margin-top: 0;">
                <li>4M+ Visits</li>
                <li>13,672 Favorites</li>
                <li>3,727 Likes | 4,622 Dislikes | ~44.6% LTDR</li>
                <li><span title="* Not including users prior to Halloween 2025">969,559+ Unique Players<span class="footnote">*</span></span></li>
            </ul>
        </p>
        <hr class="expanding-hr">
    </div>
    <div class="display tabpage" id="tab.t-4">
        <div class="display main-title">
            <h1>Software</h1>
            <hr class="expanding-hr">
        </div>
        <p>
            [Placeholder]
        </p>
        <hr class="expanding-hr">
    </div>
</body>
<script src="./modules/jszip.js"></script>
<script src="index.js" type="module"></script>
</html>