-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
90 lines (83 loc) · 3.7 KB
/
demo.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Patreon Indexer Demo Campaigns | FlyingKatsu</title>
<meta name="description" content="Simple indexing of a patreon campaign's posts">
<meta name="author" content="FlyingKatsu">
<!-- credit: Remarkable https://github.com/jonschlinkert/remarkable -->
<script src="https://cdn.jsdelivr.net/remarkable/1.7.1/remarkable.min.js"></script>
<!-- Main Script -->
<script src="patreon.js"></script>
<!-- credit: github-markdown-css https://sindresorhus.com/github-markdown-css/-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css" type="text/css" media="screen" />
<style>
.markdown-body {
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 4em;
}
.raw {
max-height: 8em;
overflow: auto;
font-family: 'Courier New', Courier, monospace;
background-color: #eeeeff;
border-radius: 1em;
padding: 0.5em;
}
@media (max-width: 767px) {
.markdown-body {
padding: 2em;
}
}
</style>
</head>
<body class="markdown-body">
<header id="info"></header>
<label for="campaigns">Select a campaign: </label>
<select id="campaigns" name="campaigns" onchange="chooseFiles(this, 'output-formatted','output-raw')">
<option value="data/hp,2">HeatPhoenix - 3D models and tutorials</option><!--1153441-->
<option value="data/pet,2">Project P.E.T. - mobile app</option><!--693136-->
<option value="data/bbj,2">BlueBandanaJake - animations</option><!--219559-->
<option value="data/om,1">LiteralLapin (OmegaMerak) - music</option><!--921829-->
<option value="data/jma,10">Minion's Art (Joyce) - Unity shader tutorials</option><!--685571-->
<option value="data/pm,11">Pedro Medeiros (saint11) - pixel art tutorials</option><!--379069-->
</select>
<div>
<h2>Raw Output</h2>
<div id="output-raw" class="raw">(no data)</div>
</div>
<div>
<div id="output-formatted">(no data)</div>
</div>
<hr/>
<div>
<h2>Patreon Campaigns</h2>
<p>Check out the actual campaigns used for this demo and support these creators!</p>
<div id="links"></div>
</div>
<script>
let info = `# Patreon Post Index Demo Campaigns`;
info += `\nThis is an example of formatting post data requested from Patreon, using the ID of a few different Patreon campaigns which you can select from the drop-down menu.`;
info += `\n\nIf you want to use this for another campaign, see [index.html](index.html)`;
info += `\n\n**Please Note:**This dataset only includes attachments up to the $1 tier. If you want to see what is available to you, create your own dataset with the instructions on [index.html](index.html)`;
info += `\n\n---`
document.getElementById('info').innerHTML = md.render(info);
let links = `\n
\n- [HeatPhoenix - 3D models and tutorials](https://www.patreon.com/heatphoenix)
\n- [Project P.E.T. - mobile app](https://www.patreon.com/petproject)
\n- [BlueBandanaJake - animations](https://www.patreon.com/BlueBandanaJake)
\n- [LiteralLapin (OmegaMerak) - music](https://www.patreon.com/LiteralLapin)
\n- [Minion's Art (Joyce) - Unity shader tutorials](https://www.patreon.com/minionsart)
\n- [Pedro Medeiros (saint11) - pixel art tutorials](https://www.patreon.com/saint11)
`;
document.getElementById('links').innerHTML = md.render(links);
// Default display
const cam = document.getElementById('campaigns');
// Select randomly
cam.value = cam.options[Math.floor(Math.random() * cam.options.length)].value;
chooseFiles(cam,'output-formatted','output-raw');
</script>
</body>
</html>