RPGDialogBox/index.html at main · Gunbard/RPGDialogBox · 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
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>RPG Dialog Box</title>
        <link rel="stylesheet" href="./index.css">
        <script src="./typewriter.js"></script>
        <script src="./app.js"></script>
    </head>
    <body>
        <div id="mainContent">
            <div id="controlsContainer">
                <div id="controls">
                    <h3>RPG Dialog Box Generator</h3>
                    Width: <input type="range" min="16" max="800" value="400" class="SliderSize" id="rangeWidth"><br>
                    Height: <input type="range" min="16" max="600" value="120" class="SliderSize" id="rangeHeight"><br>
                    <label>Background Color: <input type="color" id="colorBackground"></label><br>
                    <label>Dialog Box Color: <input type="color" id="colorDialogBox"></label><br>
                    <label>Font Color: <input type="color" id="colorFont"></label><br>
                    Font (css font-family): <input type="text" id="inputFont" size="20" value="Trebuchet MS"><br>
                    Font size (css font-size): <input type="text" id="inputFontSize" size="20" value="x-large"><br>
                    Font weight: <label><input type="checkbox" id="checkboxFontBold">Bold</label><br>
                    <input type="button" value="Update Font" id="buttonUpdateFont"><br>
                    Quick text: <input type="text" id="inputQuick" size="50"><br>
                    Dialog text:<br>
                    <textarea id="dialogInput" rows="8" cols="50">Rinoa&#13;&#10;"You best looking in room!!"&#13;&#10;&lt;new&gt;Cloud&#13;&#10;"...Whatever."&#13;&#10;&#13;&#10;("Kweh.")
                    </textarea><br>
                    <input type="button" value="Update" id="buttonUpdate">
                    <input type="button" value="Reset" id="buttonReset">
                    <input type="button" value="Clear" id="buttonClear">
                    <input type="button" value="Open" id="buttonOpen">
                    <input type="button" value="Close" id="buttonClose">
                    <input type="button" value="Prev" id="buttonPrev">
                    <input type="button" value="Next" id="buttonNext">
                    <br>
                    <label><input type="checkbox" id="checkboxHide">Hide</label>
                    <label><input type="checkbox" id="checkboxReopen" checked>Reopen on new text</label>
                    <label><input type="checkbox" id="checkboxPaging" checked>Page on double newlines</label><br>
                    <label><input type="checkbox" id="checkboxCloseOnLast" checked>Close on last line</label>
                    <label><input type="checkbox" id="checkboxAuto" checked>Auto advance</label>
                </div>
                <div id="info">
                    <h5>Dialog box directives</h5> Tags that can control dialog box behavior. Tags must be at the beginning of a line.<br><br>
                    Currently supported tags:<br><br>
                    &lt;new&gt; - Re-opens the dialog box. Should not be on first line.
                    <p class="monospaced">
                        Rinoa<br>
                        "You best looking in room!!"<br>
                        &lt;new&gt;Cloud<br>
                        "...Whatever."
                    </p>
                </div>
            </div>

            <div class="centerAlign">
                <div id="dialogContainer">
                    <div id="mainDialog" class="animateScale"></div>
                    <img src="moreText.gif" id="moreTextIcon">
                </div>
            </div>
        </div>
    </body>
</html>