-
Notifications
You must be signed in to change notification settings - Fork 1
/
Sidebar.html
107 lines (93 loc) · 3.91 KB
/
Sidebar.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
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script src="https://kit.fontawesome.com/aed1e15307.js" crossorigin="anonymous"></script>
<style>
.wrapper {
vertical-align: top;
text-align: center;
}
.icon {
width: 25px;
height: 25px;
}
.btn {
color: black;
margin: 0px;
margin-bottom: 10px;
margin-right: 5px;
font-size: 12px;
line-height: 1.25;
max-width: 50px;
max-height: 50px;
min-width: 50px;
min-height: 50px;
transition: 250ms;
}
.btn:hover {
transform: scale(1.05);
transition: 250ms;
}
.btn:active {
transform: scale(0.95);
transition: 250ms;
}
.bigbtn {
color: black;
font-size: 18px;
line-height: 1.25;
width: 100%;
height: 50px;
left: 50%;
transition: 250ms;
}
.bigbtn:hover {
transform: scale(1.05);
transition: 250ms;
}
.bigbtn:active {
transform: scale(0.95);
transition: 250ms;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<!-- Dice buttons, in order -->
<div class="wrapper">
<button class="btn" onclick="google.script.run.d4()"><img class="icon" src="https://raw.githubusercontent.com/waterlava/dice-roller/f775e3565babbc898b00120dcac798bc78c94d46/Dice/d4.svg"><br/>d4</button>
<button class="btn" onclick="google.script.run.d6()"><img class="icon" src="https://raw.githubusercontent.com/waterlava/dice-roller/f775e3565babbc898b00120dcac798bc78c94d46/Dice/d6.svg"><br/>d6</button>
<button class="btn" onclick="google.script.run.d8()"><img class="icon" src="https://raw.githubusercontent.com/waterlava/dice-roller/f775e3565babbc898b00120dcac798bc78c94d46/Dice/d8.svg"><br/>d8</button>
<button class="btn" onclick="google.script.run.d10()"><img class="icon" src="https://raw.githubusercontent.com/waterlava/dice-roller/f775e3565babbc898b00120dcac798bc78c94d46/Dice/d10.svg"><br/>d10</button>
<button class="btn" onclick="google.script.run.d12()"><img class="icon" src="https://raw.githubusercontent.com/waterlava/dice-roller/f775e3565babbc898b00120dcac798bc78c94d46/Dice/d12.svg"><br/>d12</button>
<button class="btn" onclick="google.script.run.d20()"><img class="icon" src="https://raw.githubusercontent.com/waterlava/dice-roller/f775e3565babbc898b00120dcac798bc78c94d46/Dice/d20.svg"><br/>d20</button>
<button class="btn" onclick="google.script.run.d100()"><img class="icon" src="https://raw.githubusercontent.com/waterlava/dice-roller/f775e3565babbc898b00120dcac798bc78c94d46/Dice/d100.svg"><br/>d100</button>
</div>
<br/>
<div class="block form-group" id="formula-block">
<label for="formula">Dice formula:</label>
<input id="formula" value="1d20" style="width: 100%">
<br>
<button onclick="google.script.run.rolz(document.getElementById('formula').value)">Roll</button>
<br><br>
<a href="https://rolz.org/">Documentation</a>
<br><br><br><br>
<button class="bigbtn" onclick="google.script.run.Roll()">Roll from Sheet</button>
</div>
</div>
<div class="sidebar bottom" style="overflow: hidden;">
<div style="width: 70%; float:left">
<a href="http://waterlava.github.io/dice-roller" target="_blank">
<img alt="Add-on logo" style="vertical-align: middle" width="25"
src="https://raw.githubusercontent.com/waterlava/dice-roller/9541883fc5366b687b97c388cd2cb7b04eb8ba1c/Dice/logo%20-%20128.svg">
<span class="gray branding-text">Dice Roller by Daniel Thorp</span>
</a>
</div>
<div style="width: 30%; float:right">
<button onclick="google.script.run.openSettings();"><i class="fas fa-cog"></i> Settings</button>
</div>
</div>
</body>
</html>