GDImageBrowser/index.html at master · undefined06855/GDImageBrowser · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">

        <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=Noto+Sans:wght@500&display=swap" rel="stylesheet">

        <link rel="shortcut icon" href="./favicon.png" type="image/png">

        <meta property="og:title" content="GDImageBrowser">
        <meta property="og:site_name" content="GDImageBrowser">
        <meta property="og:url" content="gdimagebrowser.undefined0.dev">
        <meta property="og:description" content="A tool to browse Geometry Dash's spritesheets, for multiple versions!">
        <meta property="og:type" content="website">


        <title>GDImageBrowser</title>
    </head>
    <body>
        <!-- yeah get tracked -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-8ZG03L0CXR"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag('js', new Date());
            gtag('config', 'G-8ZG03L0CXR');
        </script>

        <main>
            <section class="white-overlay">
                <span class="title-wrapper">
                    <h1>GDImageBrowser</h1>
                    <a href="https://github.com/undefined06855/GDImageBrowser" target="_blank">
                        <img src="./assets/web/gh-icon.png" class="gh-icon" />
                    </a>
                </span>
                <div class="spacer"></div>
                <label for="version-select">Version: </label>
                <select id="version-select">
                    <option value=-2>geometrydash.com</option>
                    <option value=-1>1.2 GD Lite</option>
                    <option value=0>2.113</option>
                    <option value=1>2.204</option>
                    <option value=2>2.2073</option>
                    <option value=3>2.2074</option>
                    <option value=4>2.208</option>
                    <option value=5 selected>2.2081</option>
                    <option value=1000>Geode v4.10.0</option>
                    <option value=1001>Geode v5.2.0</option>
                    <option value=1002>Geode v5.5.3</option>
                </select>
                <br/>
                <label for="sheet-select">Sprite sheet: </label>
                <select id="sheet-select">

                </select>
                <br/>
                <label for="quality-select">Quality: </label>
                <select id="quality-select">
                    <option value=0>SD</option>
                    <option value=1>HD</option>
                    <option value=2 selected>UHD</option>
                </select>
                <div id="version-notes"></div>

                <hr/>
                <div><label>Name: </label><span class="mono" id="name"></span></div>
                <div><label>Offset: </label><span class="mono" id="offset"></span></div>
                <div><label>Size: </label><span class="mono" id="size"></span></div>
                <div><label>Source s</label>ize: <span class="mono" id="ssize"></span></div>
                <div><label>Rect: </label><span class="mono" id="rect"></span></div>
                <div><label>Rotated: </label><span class="mono" id="rot"></span></div>
                <div id="physical-buttons">
                    <button id="copy">Copy (name)</button>
                    <button id="copy-url">Copy (url)</button>
                    <button id="copy-image">Copy (image)</button>
                    <button id="download">Download</button>
                </div>
                <hr/>

                <details open>
                    <summary>Controls</summary>
                    Click to select, right click to copy, double click to download.
                    Use the dropdowns at the top left to change the version, spritesheet and quality.
                    Press Ctrl+F to search.
                </details>

                <div><input id="animate" type="checkbox" /><label for="animate"> Animate? (if possible)</label></div>
                <div><input id="animate-speed" type="range" min="50" max="200" value="100" /><label for="animate-speed"> Animation Speed</label></div>
                <div><input id="include-offset" type="checkbox" /><label for="include-offset"> Consider sprite offset</label></div>
                <div><input id="find-portal" type="checkbox" /><label for="find-portal"> Find rest of portal sprites (very broken)</label></div>
                <h5 id="loader" style="display: none">(loading)</h5>

                <div id="preview-wrapper">
                    <canvas id="preview"></canvas>
                    <canvas id="preview2"></canvas>
                </div>
                <div id="preview-scale"></div>
            </section>

            <div id="canvas-wrapper">
                <canvas id="canvas"></canvas>
            </div>

            <div id="search-wrap">
                <input type="text" id="search-bar" /><br/>
                <ul id="search-dropdown" style="display: none;"></ul>
                <div id="search-info">...</div>
            </div>
        </main>

        <script src="plistshit.js"></script>
        <script src="structs.js"></script>
        <script src="main.js"></script>
    </body>
</html>