-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
63 lines (54 loc) · 2.54 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
<html>
<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3190703544497153",
enable_page_level_ads: true
});
</script>
<title>Github Frequency Editor</title>
<link href="style.css" rel="stylesheet" />
<link href='//fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="content">
<h1>Github Frequency Editor</h1>
<canvas id="canvas"></canvas>
<br />
<button onclick="$('.debug').toggle()">Toggle Debug</button>
<button onclick="loadHistory()">Load History</button>
<button onclick="$('#imgInp').click()">Upload Image</button>
<button onclick="exportScript()">Export as Script</button>
<br />
<div id="description">
<br />
Use this tool to generate a custom display image for a Github profile page.<br /><br />
Click or drag the mouse in the above image to draw a "commit history" that will be exported as a series of commits varying throughout the past year timestamps.<br /><br />
Because drawing a neat image with the mouse isn't too easy, you can also use the the "Upload Image" button above.<br /><br />
For best results when using a custom image, try to match the grid dimensions exactly.
<br />
</div>
<div class="debug">
<label for="cols">Columns: </label><input name="cols" type="number" value="53" />
<label for="rows">Rows: </label><input name="rows" type="number" value="7" />
<label for="ss">Square Size: </label><input name="ss" type="number" value="12" />
<textarea class="debug" name="result" wrap="hard"></textarea>
<br />
</div>
<!-- this is for image preview stuff -->
<div hidden>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
<canvas id="imageprev">
</canvas>
</div>
<div id="downloaddiv" hidden>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="grid.js"></script>
</body>
</html>