forked from PrincessRTFM/WebUtil
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdhook.html
114 lines (114 loc) · 5.93 KB
/
dhook.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
<!DOCTYPE html>
<!--
@desc a (mostly complete) visual interface for sending messages through Discord webhooks
@hidden
-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Discord webhook interface</title>
<link rel="stylesheet" type="text/css" href="css/dhook.css" />
<script type="text/javascript" src="js/hosted/discord.stable.min.js"></script>
<script type="text/javascript" src="js/hosted/jscolor.js"></script>
<script type="text/javascript" src="js/dhook.browser.js"></script>
</head>
<body>
<div id="interface">
<div class="sect">
<h2>Webhook Target</h2>
<div id="hookTarget">
<label for="hookId" class="header">Webhook URL or ID</label>
<input type="text" id="hookId" class="expand" placeholder="Enter hook URL or ID in the form of 'snowflake/token' here" />
<div id="hookDetails"><img src="img/webhook-waiting.png" id="hookStatus" /></div>
</div>
</div>
<div class="sect">
<h2>Display</h2>
<div id="webhookDisplay">
<div id="webhookDetailsPreview">
<div id="webhookDetailsContainer">
<span id="usernamePreview"></span>
<img id="avatarPreview" style="display: none" />
</div>
</div>
<div id="displayOverride">
<label for="overrideUsername">Username override</label>
<input type="text" id="overrideUsername" class="expand" placeholder="Temporarily change the display name" />
<label for="overrideAvatar">Avatar override</label>
<input type="text" id="overrideAvatar" class="expand url" placeholder="Temporarily change the avatar (must be an HTTP(S) URL)" />
</div>
</div>
</div>
<div class="sect">
<h2>Message Content</h2>
<div id="plainContent">
<label for="plainMessage" class="header">Standard markdown-enabled message text</label>
<textarea id="plainMessage" placeholder="If no message is provided, only embeds and uploads will be sent"></textarea>
</div>
</div>
<div class="sect">
<h2>Rich Embed</h2>
<div id="embeds">
<label for="embedTitle" class="header">Title</label>
<input type="text" id="embedTitle" class="expand" placeholder="Displayed at the top just below the author" />
<label for="embedURL">URL</label>
<input type="text" id="embedURL" class="expand url" placeholder="Must be an HTTP(S) link" />
<label for="embedText">Content</label>
<textarea id="embedText" placeholder="Markdown is supported"></textarea>
<!-- TODO allow uploading a file as the URL for all of these things -->
<label for="embedThumbnail">Thumbnail URL</label>
<input type="text" id="embedThumbnail" class="expand url" placeholder="Must be an HTTP(S) link" />
<label for="embedVideo">Video URL</label>
<input type="text" id="embedVideo" class="expand url" placeholder="Must be an HTTP(S) link" />
<label for="embedImage">Image URL</label>
<input type="text" id="embedImage" class="expand url" placeholder="Must be an HTTP(S) link" />
<label for="embedAuthorName">Author name</label>
<input type="text" id="embedAuthorName" class="expand" placeholder="Displayed at the top, above the title" />
<label for="embedAuthorURL">Author URL</label>
<input type="text" id="embedAuthorURL" class="expand url" placeholder="Must be an HTTP(S) link" />
<label for="embedAuthorIcon">Author icon URL</label>
<input type="text" id="embedAuthorIcon" class="expand url" placeholder="Must be an HTTP(S) link" />
<label for="embedFooter">Footer</label>
<input type="text" id="embedFooter" class="expand" placeholder="Displayed at the bottom" />
<label for="embedFooterIcon">Footer icon URL</label>
<input type="text" id="embedFooterIcon" class="expand url" placeholder="Must be an HTTP(S) link" />
<label for="embedColour">Side colour</label>
<input type="text" id="embedColour" class="expand jscolor" data-jscolor="{width:300, height:200, position:'above',
borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666', required:false}" placeholder="Leave blank for no colour" />
<!-- TODO implement user-definable fields
Needed:
- extra information key/value (up to 25 - sortable, too...)
-->
</div>
</div>
<div class="sect nyi">
<h2>File Uploads</h2>
<div id="uploads">
<!-- TODO implement file uploads
Needed:
- dynamically variable file uploaders - sortable, if I can...
- JS file upload, into the API: `{ attachment: Buffer/Stream/path, name: String }`
-->
</div>
</div>
</div>
<div id="leftbar" class="sidebar">
<button class="trigger-hook right low">Send message</button>
<button class="trigger-hook right high">Send message</button>
<h3>Welcome to DHook!</h3>
<p>This is a graphical (browser-based) interface to discord webhooks. It's built on <a href="https://discord.js.org/">discord.js</a> as an API, and is currently in a pre-release state. To-be-implemented features include support for file uploads, custom label/content fields in the rich embed, and the ability to use uploaded files in place of any of the URL fields.</p>
<p>Hover over something on the interface to see some simple help text about it and how to use it on the right sidebar.</p>
<h4>Quick Basics</h4>
<p>You need to provide a <b>webhook ID</b> (you can paste the URL that discord gives you into the box, DHook can extract the ID) and some kind of <b>content</b> to post.</p>
<p>Rich embeds are the things that bots usually post, and are also basically what website preview embeds are. You can post an embed with any content you want, even none at all!</p>
</div>
<div id="rightbar" class="sidebar">
<h4>Quick Help</h4>
<p id="helpText"><i>Hover over a control for details</i></p>
<h4>Message Status</h4>
<p id="transmissionResult"><i>Once you send a message, this section will report its status</i></p>
<button class="trigger-hook left low">Send message</button>
<button class="trigger-hook left high">Send message</button>
</div>
</body>
</html>