-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (125 loc) · 5.09 KB
/
index.html
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
<html>
<head>
<title>Spinning wheel</title>
<link rel="stylesheet" href="index.css" type="text/css"/>
<script type="text/javascript" src="./Winwheel.js"></script>
<script src="./TweenMax.min.js"></script>
</head>
<body id="body">
<div align="center">
<input type="file" accept=".json" id="file-upload" style="display: none">
<input type="color" id="color-picker" style="opacity: 0; z-index: -1">
<div id="sidebar">
<div id="curve">
<hr class="solid">
<hr class="solid">
<hr class="solid">
</div>
<div style="width:80%">
<hr class="solid">
<div>
<button id="editList" title="The items that will be on the wheel.">LIST</button>
</div>
<div style="white-space: nowrap">
<input id="randomizeCheckbox" type="checkbox">
<span style="font-size: 14.3px">Randomize Order</span>
</div>
<div style="white-space: nowrap">
<input id="splitUpCheckbox" type="checkbox">
<span style="font-size: 14.3px">Individualize Items</span>
</div>
<div class="tableHolder">
<table id="listTable"></table>
</div>
<div style="display: flex">
<button id="addList" title="Add an item to the LIST">+</button>
<button id="importList" style="width: -webkit-fill-available" title="Add a bunch of items to LIST via a .json file">Import</button>
</div>
<hr class="solid">
<div style="display: flex">
<input type="checkbox" id="useSkip" style="width: 20%; margin-left:2%;margin-right:2%" checked>
<button id="editSkip" style="width: -webkit-fill-available;display: block;" title="Items that get removed from the wheel">SKIP</button>
</div>
<div class="tableHolder" class="skipItem">
<table id="skipTable" class="skipItem"></table>
</div>
<div style="display: flex" class="skipItem">
<button id="addSkip" title="Add item to the SKIP">+</button>
<button id="importSkip" style="width: -webkit-fill-available" title="Add a bunch of items to SKIP via a .json file">Import</button>
</div>
<hr class="solid">
<div>
<button id="editColors" title="List of COLORS of the wheel">COLORS</button>
</div>
<div class="tableHolder">
<table id="colorsTable"></table>
</div>
<div style="display: flex">
<button id="addColor" title="Add a COLOR to the wheel.">+</button>
<button id="importColor" style="width: -webkit-fill-available" title="Add a bunch of COLORS to the wheel via a .json file">Import</button>
</div>
<hr class="solid">
<div class="row">
<button id="exportWheelBttn">EXPORT WHEEL SETTINGS</button>
<button id="exportDataBttn">EXPORT ALL DATA</button>
</div>
</div>
</div>
<div id="results">
<h1 id="result"></h1>
<div id="main-buttons">
<button id="select" style="display: none" title="Select this item and subsequently add it to the SKIP list">SELECT</button>
<button id="respin" style="display: none" title="Respin the wheel.">RESPIN</button>
</div>
</div>
<canvas id="canvas" width="1000" height="1000" style="z-index: 10">
<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
</canvas>
<div id="edit-item">
<div id="edit-item-container">
<span id="edit-item-title"></span>
<div id="edit-item-editorHolder">
<div id="edit-item-colors" class="highlight"></div>
<textarea id="lines" disabled spellcheck="false"></textarea>
<textarea id="edit-item-editor" spellcheck="false"></textarea>
</div>
<button id="edit-item-cancel" class="edit-item-button">CANCEL</button>
<button id="edit-item-reset" class="edit-item-button">RESET</button>
<button id="edit-item-save" class="edit-item-button">SAVE</button>
</div>
</div>
<div id="add-item">
<div id="add-item-container">
<div>
<span id="add-item-title"></span>
<div style="display: block; font-size: 200%;width: fit-content">
<div id="add-item-color" class="highlight" style="display: none; width:52.4px; height: 52.4px; float:left;background-color: black"></div>
<input id="add-item-weight" min="1" style="display: none;font-size: 125%; float:left; margin-left: 10%" placeholder="AUTO" type="number" title="How many extra slots does each item take up.">
<input id="add-item-value" style="font-size: 125%;display: inline-block; float:left; ">
</div>
</div>
<div>
<button id="add-item-cancel" class="add-item-button">CANCEL</button>
<button id="add-item-add" class="add-item-button">ADD</button>
</div>
</div>
</div>
<div id="export-file">
<a id="export-file-anchor" style="display: none"></a>
<div id="export-file-container">
<div>
<a id="export-file-title">This is just the JSON settings for the wheel, you'll still need the <a href="http://dougtesting.net/home" target="_blank">winWheel.js</a> file to create a new wheel.</span>
<div style="display: block; font-size: 200%;width: 90%; height: 75%">
<textarea id="export-file-data" spellcheck="false"></textarea>
</div>
</div>
<div>
<button id="export-file-close" class="export-file-button">close</button>
<button id="export-file-download" class="export-file-button">download</button>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>