-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
42 lines (41 loc) · 2.28 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
<html>
<head>
<title>#CountdownToMars - Badge Maker</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="countdown.js" defer></script>
<!--<script src="https://oauth.io/auth/download/latest/oauth.js" defer></script>-->
<script src="badges.js"></script>
<script src="main.js" defer></script>
</head>
<body>
<div class="content">
<h1 style="font-family: Recursive"><a onclick="sharetweet()" target="_blank"><i id="imageicon" class="fab fa-twitter"></i> #CountdownToMars</a></h1>
<div id="countdown"></div>
<p>Select a template, add a name and upload a photo (optional).</p>
<div style="display: flex;">
<div id="badges"></div>
<br>
<div id="inputarea" style="filter: opacity(0.5); pointer-events: none; user-select: none; display: inline-grid; grid-auto-rows: max-content;">
<textarea id="inputtext" placeholder="Your Name" maxlength="32"></textarea>
<br>
<label class="inputlbl" id="uploadlbl">
<input id="fileinput" style="display: none;" type="file" accept="image/*"><i id="imageicon" class="far fa-image" title="only images are allowed"></i> UPLOAD PHOTO <span id="imagename" style="font-size: 15px; color: aqua; vertical-align: middle;"></span></input>
</label>
<br>
<button class="inputlbl" id="downloadlbl" onclick="download(); processBadge(curbadge[0], curbadge[1])">
<i id="imageicon" class="fas fa-file-download"></i> DOWNLOAD
</button>
<!--<br>
<button class="inputlbl" onclick="tweetBadge()" style="background-color: #002846e0;">
<i class="fab fa-twitter"></i> SHARE ON TWITTER
</button>-->
</div>
</div>
<p style="font-size: 140%; text-align: center; color: #ffffff5e">Unofficial Mars Badge Maker, by <a href="https://twitter.com/SalatielSauer">Salatiel</a></p>
</div>
<canvas id="badgeCanvas" style="pointer-events: none; position: fixed; top: 0; left: 0; display: none"></canvas>
</body>
</html>