-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (99 loc) · 6.22 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
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta content="" name="description"/>
<meta content="Timendum" name="author"/>
<title> Reddit commented thread </title>
<link rel="stylesheet" href="./output.css" />
</head>
<body class="font-sans">
<div class="my-4" id="content" tabindex=-1>
<div class="container mx-auto">
<h1 class="text-4xl">Reddit most commented threads</h1>
<p class="my-2">Input a subreddit or a multi-subreddit and this tool will generate a chart of the most commented threads.</p>
</div>
</div>
<div class="container mx-auto">
<div class="p-4 mb-4 rounded-lg bg-orange-200 bg-gradient-to-b from-amber-200 border-red-200 border-2 hidden" id="url-error-message"></div>
</div>
<div class="container mx-auto">
<form id="main-form">
<div class="flex">
<div class="grow mr-2">
<input type="text" class="border border-slate-200 px-2 py-1 w-full rounded" id="reddit-url" placeholder="https://www.reddit.com/...">
</div>
<div class="xl:w-32 w-28 mr-2">
<button class="text-white bg-blue-600 hover:bg-blue-800 focus:ring-2 focus:ring-blue-200 font-medium rounded-lg text-sm px-3 py-1.5 focus:ring-blue-800 shadow shadow-cyan-800 bg-gradient-to-br from-blue-400 hover:from-blue-600 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:from-gray-400 disabled:shadow-gray-800" type="submit" id="submit" data-original-text="Submit" data-loading-text="Loading...">Submit</button>
</div>
<div class="xl:w-32 w-28 mr-2 content-center">
<label for="advanced-form" class="">Advanced</label>
<input type="checkbox" class="" id="advanced-form">
</div>
</div>
<div class="form-advanced" hidden>
<div class="flex flex-wrap my-2">
<div class="basis-1/3">
<label for="pieComments" class="basis-auto" title="How many comments should be fetched from Reddit">
Comments to get
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="inline-block" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
</svg>
</label>
<input type="number" class="w-16 border border-slate-200 px-2 py-1 rounded" id="pieComments" value="200" min="100" step="100">
</div>
<div class="basis-1/3">
<label for="scatterSubmissions" class="" title="How many submissions should be fetched from Reddit">
Submissions to get
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="inline-block" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
</svg>
</label>
<input type="number" class="w-16 border border-slate-200 px-2 py-1 rounded" id="scatterSubmissions" value="100" min="100" step="100">
</div>
<div class="basis-1/3 content-center">
<label for="filter-multireddit" class="" title="Remove lowest submission by subreddit">
Filter multireddit
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="inline-block" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
</svg>
<span class="glyphicon glyphicon-info-sign"></span>
</label>
<input type="checkbox" class="align-middle" id="filter-multireddit" value="on">
</div>
</div>
<div class="flex flex-wrap">
<div class="basis-1/4"><label class="">Scatter chart:</label></div>
<div class="basis-1/4">
<label for="scatterMaxX" class="">Max x</label>
<input type="number" class="w-20 border border-slate-200 px-2 py-1 rounded" id="scatterMaxX" value="0" min="0">
</div>
<div class="basis-1/4">
<label for="scatterMaxY" class="">Max y</label>
<input type="number" class="w-20 border border-slate-200 px-2 py-1 rounded" id="scatterMaxY" value="0" min="0">
</div>
<div class="basis-1/4 content-center">
<label for="logaritmic" class="">Log scale</label>
<input type="checkbox" class="align-middle" id="logaritmic" value="on">
</div>
</div>
</div>
</form>
</div>
<div class="container mx-auto mt-5">
<div class="flex flex-wrap">
<div class="w-1/2">
<div id="pie_div"></div>
</div>
<div class="w-1/2">
<div id="points_div"></div>
</div>
</div>
</div>
<script src="https://code.highcharts.com/12/highcharts.js"></script>
<script src="snoowrap-v1.min.js"></script>
<script src="comments.js"></script>
</body>
</html>