-
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
139 lines (137 loc) · 8.73 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
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Online client for Discord webhooks</title>
<meta name="language" content="en-US">
<meta name="author" content="Yağızhan Burak Yakar (evrifaessa), https://github.com/evrifaessa">
<meta name="msapplication-TileColor" content="#7289da">
<meta name="msapplication-config" content="./assets/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A minimal online application to interact with Discord webhooks easily. You cand send stuff to Discord webhooks right inside your browser using this website.">
<meta name="keywords" content="evrifaessa, webhook, online, client, discord, discordapp, sender, send, channel">
<meta name="title" content="Online client for Discord webhooks">
<meta name="color-scheme" content="light dark">
<!-- Bootstrap core CSS -->
<link href="./assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Form validation -->
<link href="./assets/css/form-validation.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="./assets/css/fontawesome.min.css" rel="stylesheet">
<!-- Custom styles -->
<link href="./assets/css/styles.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
<link rel="manifest" href="./assets/favicon/site.webmanifest">
<link rel="mask-icon" href="./assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="./assets/favicon/favicon.ico">
<link rel="canonical" href="https://webhook.yagiz.dev">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://webhook.yagiz.dev">
<meta property="og:type" content="website">
<meta property="og:title" content="webhook.yagiz.dev">
<meta property="og:description" content="A minimal online application to interact with Discord webhooks easily.">
<meta property="og:image" content="https://raw.githubusercontent.com/evrifaessa/discord-webhook/master/assets/images/placeholder.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="webhook.yagiz.dev">
<meta property="twitter:url" content="https://webhook.yagiz.dev">
<meta name="twitter:title" content="webhook.yagiz.dev">
<meta name="twitter:description" content="A minimal online application to interact with Discord webhooks easily.">
<meta name="twitter:image" content="https://raw.githubusercontent.com/evrifaessa/discord-webhook/master/assets/images/placeholder.png">
</head>
<body class="bg-light">
<div class="preloader"></div>
<div class="container">
<main>
<div class="py-5 text-center">
<h1><i class="fab fa-discord"></i><br />Online client for Discord webhooks</h1>
<h2 class="lead"><b>Below is an interface that lets you interact with Discord webhooks right in your browser.</b><br />Looking for technical documentation about webhooks? See Discord's official guide <a href="https://discord.com/developers/docs/resources/webhook">here</a>.</h2>
<a class="github-button" href="https://github.com/evrifaessa/discord-webhook" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-show-count="true" aria-label="Star evrifaessa/discord-webhook on GitHub">Star</a>
</div>
<div id="alert-placeholder"></div>
<div class="row g-3">
<div class="col-md-5 col-lg-4 order-md-last">
<h3 class="d-flex justify-content-between align-items-center mb-3">
<span id="preview-label">Preview</span>
</h3>
<ul class="list-group mb-3" style="align-items: center;">
<li class="list-group-item d-flex justify-content-between lh-sm flex-column justify-content-center" style="background-color: #222; color: #ffffff!important;">
<img class="rounded-circle z-depth-2" id="preview-image" style="max-width: 125px;" alt="100x100" src="./assets/images/placeholder.png" data-holder-rendered="true">
<span align="center"><strong id="preview-username">Wumpus</strong><span class="bot-tag">BOT</span></span>
</li>
<br>
<li id="preview-block" class="list-group-item d-flex justify-content-between lh-sm flex-column justify-content-center" style="background-color: #222; color: #ffffff!important;">
<span class="text-muted" style="color: #ffffff!important"><i class="fas fa-pen"></i> Start writing your message :)</span>
</li>
</ul>
</div>
<div class="col-md-7 col-lg-8">
<h3 class="mb-3">Webhook details</h3>
<form class="needs-validation" id="main-form" novalidate>
<div class="row g-3">
<div class="col-12">
<label for="url" class="form-label">Webhook address</label>
<div class="input-group">
<span class="input-group-text">https://discord.com/api/webhooks/</span>
<input type="text" class="form-control" id="url" placeholder="123/abc" required>
<div class="input-group-append">
<button class="btn btn-dark" id="retreive" type="button">Retreive</button>
</div>
<div class="invalid-feedback">
Please enter a valid URL for your webhook.
</div>
</div>
</div>
<div class="col-12">
<label for="username" class="form-label">Appearing username</label>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" id="username" placeholder="Wumpus" required>
<div class="invalid-feedback">
You need to provide a username.
</div>
</div>
</div>
<div class="col-12">
<label for="icon-url" class="form-label">Icon URL</label>
<input type="url" class="form-control" id="icon-url" placeholder="https://cdn.discordapp.com/avatars/123/icon.png" required>
<div class="invalid-feedback">
Please enter a valid URL for your webhook's icon.
</div>
</div>
<div class="col-12">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3" placeholder="**Hello!** I'm a webhook." required></textarea>
<small id="messageHelp" class="form-text text-muted"><a href="https://support.discord.com/hc/en-us/articles/210298617">Markdown</a> is supported for this field.</small>
<div class="invalid-feedback">
Please enter your message. You can't send a blank webhook.
</div>
</div>
</div>
<hr class="my-4">
<button class="w-100 btn btn-primary btn-lg" id="submit-button" type="submit"><i class="fas fa-paper-plane"></i> Send the webhook</button>
</form>
</div>
</div>
</main>
<footer class="my-5 pt-5 text-muted text-center text-small">
<a class="github-button" href="https://github.com/evrifaessa/discord-webhook" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-show-count="true" aria-label="Star evrifaessa/discord-webhook on GitHub">Star</a>
<p class="mb-1">© 2020, <a href="https://github.com/evrifaessa">evrifaessa</a>.</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="https://github.com/evrifaessa/discord-webhook/blob/master/LICENSE">License</a></li>
<li class="list-inline-item"><a href="https://github.com/evrifaessa">Developer</a></li>
<li class="list-inline-item"><a href="https://github.com/evrifaessa/discord-webhook">Source</a></li>
</ul>
</footer>
</div>
<script src="./assets/js/bootstrap.bundle.min.js"></script>
<script src="./assets/js/form-validation.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/discord-markdown.min.js"></script>
<script src="./assets/js/main.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>