MCWebGUI/index.html at main · BastionMC/MCWebGUI · 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
<!DOCTYPE html>
<desktop></desktop>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="src/mcwebgui/importer.js" type="module"></script>
    <title>MCWebGUI Development Page</title>
    <link rel="stylesheet" href="experimenting.css">
</head>
<body>
    Hello there, person seeing this!
    These are the "testing grounds", as I like to call them.
    It is not ready to be released, nor is it ready to be translated (Sorry Wulian).
    Yea. I guess you can just wait?
    If you want to know specific stuff, just ask me in our Discord.
    Shameless self promo but yeah.
    Don't look at index.html right now.
    It's kinda scuffed.
    Most custom elements are implemented, but I still wouldn't look at the HTML file...

    <divider></divider>

    <h1>All Elements:</h1>
    <divider></divider>
    <mc-button>Wow thats bland</mc-button>
    <mc-button color="green">success!!1</mc-button>
    <mc-button color="red">Delete your existence.</mc-button>
    <mc-button color="purple">Buy a cheaply made $60 DLC</mc-button>
    <mc-button color="dark">oo look at me im so edgy B)</mc-button>
    <mc-button disabled="true">You dont get to click me (¬_¬ )</mc-button>
    <mc-button disabled="true" color="green">Stop it.</button></mc-button>

    <divider></divider>

    Quick Note: In the official UI design, there aren't any tall buttons, but I've decided to implement them anyway, so people can do more stuff with this library. I got the idea for tall buttons from the tabs and multi-select buttons.

    <divider></divider>

    <mc-button tall="true">Haha im taller than uu</mc-button>
    <mc-button tall="true" color="green">revive</mc-button>
    <mc-button tall="true" color="red">ruh roh universe is exploding</mc-button>
    <mc-button tall="true" color="purple">Buy a KAJILLION RIP OFF MINE COINS</mc-button>
    <mc-button tall="true" color="dark">BUY FROM THE DARK WEB NYEHEHE</mc-button>
    <mc-button tall="true" disabled="true">You still dont get to click me (¬_¬" )</mc-button>
    <mc-button tall="true" disabled="true" color="green">NUH UH</mc-button>

    <divider></divider>

    <mc-input placeholder="Type something..."></mc-input>
    <mc-input placeholder="Cheat code" disabled="true"></mc-input>

    <divider></divider>

    <mc-switch></mc-switch>
    <mc-switch disabled="true"></mc-switch>
    <mc-switch disabled="true" toggled="true"></mc-switch>

    <divider></divider>

    <mc-slider min="0" max="100" value="50"></mc-slider>
    <mc-slider min="1" max="5" value="3" lines="true"></mc-slider>
    <mc-slider min="0" max="100" value="50" disabled="true"></mc-slider>
    <mc-slider min="1" max="5" value="3" disabled="true" lines="true"></mc-slider>

    <divider></divider>

    <mc-checkbox></mc-checkbox>
    <mc-checkbox disabled="true"></mc-checkbox>
    <mc-checkbox disabled="true" checked="true"></mc-checkbox>

    <divider></divider>

    <divider></divider>

    Yet another Note: For the selections, only tall bland ones, and short dark ones are actually used. There aren't any appearances in Mojang's UI of short bland selections or tall dark selections. If you wanna stick with Mojang's style, don't use selection heights that aren't intended.

    <divider></divider>

    <mc-select selected="1"></mc-select>
    <mc-select selected="2" tall="true"></mc-select>
    <mc-select selected="3" color="dark"></mc-select>
    <mc-select selected="2" color="dark" tall="true"></mc-select>
    <mc-select selected="1" disabled="true"></mc-select>
    <mc-select selected="2" disabled="true" tall="true"></mc-select>

    <divider></divider>

    <h1>Test forms n' stuff:</h1>

    <divider></divider>

    <p id="TF-PIXEL-TEXT">Pixel size (Might be scuffed): </p>
    <mc-slider id="TF-PIXEL-SLIDER" min="1" max="4" value="2" lines="true"></mc-slider>

    <script>
        const TFPixelSlider = document.getElementById("TF-PIXEL-SLIDER");
        const TFPixelText = document.getElementById("TF-PIXEL-TEXT");

        TFPixelSlider.addEventListener("mouseup", function () {
            MCWebGUI.SetPixelSize(TFPixelSlider.getValue());
            TFPixelText.textContent = "Pixel size (Might be scuffed): " + MCWebGUI.GetPixelSize();
        });
        TFPixelSlider.addEventListener("mouseleave", function () {
            MCWebGUI.SetPixelSize(TFPixelSlider.getValue());
            TFPixelText.textContent = "Pixel size (Might be scuffed): " + MCWebGUI.GetPixelSize();
        });
    </script>
</body>
</html>