-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
140 lines (132 loc) · 6.94 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
140
<!DOCTYPE html>
<html>
<head>
<title>Statsify</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-134650186-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-134650186-1');
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="lib/codemirror.css">
<link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:300,400" rel="stylesheet">
<script src="lib/codemirror.js"></script>
<script src="lib/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="visualize.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="container mb-3">
<div class="background"></div>
<div class="header">
<div class="header-main header-left">
<a id="statsify-text-link" href="/">Statsify</a>
</div>
<div class="header-main header-right">
<a href="/api">API Docs</a>
</div>
<div class="text-center">
<a href="/"><img class="header-logo" id="logo" alt="Logo" width="40px" src="assets/logo.png"></a>
</div>
</div>
<div id="body" class="body text-center">
<h1 class="dark-font font-weight-bold body-main">Visualize a page or website</h1>
<p class="body-subtext">Show key stats such as word count, internal and outbound links, and more</p>
</div>
<div id="search" class="search input-group justify-content-center text-center">
<div class="input-group-prepend">
<div class="dropdown">
<button class="drop-btn btn page-btn search-btn" id="drop-btn" onclick="onDropdownClicked();">PAGE</button>
<div class="dropdown-content" id="dropdown-content">
<button class="drop-option website-btn search-btn btn" id="drop-option"
onclick="onDropdownOptionClicked();">WEBSITE</button>
</div>
</div>
<select class="select-depth search-btn" id="select-depth">
<option value="1" elected>DEPTH</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="search-url-container">
<input type="text" class="search-url search-btn form-control text-center" id="search-url"
placeholder="http://www.example.com" onchange="onSearchUrlChange();">
</div>
<button class="btn btn-primary search-btn" id="search-btn" onclick="onSearch();">SEARCH</button>
</div>
<div class="text-center error-container">
<p id="error-message"></p>
</div>
<div class="text-center" id="visualizations">
<div class="background-1"></div>
<div class="text-center">
<a class="text-center" id="url-visualization-header"></a><br><br>
</div>
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="visualizations">
<h5 class="text-center dark-font">Internal Links</h5>
<ul class="vis-ul" id="internal-links"></ul>
<br>
<h5 class="text-center dark-font">Outbound Links</h5>
<ul class="vis-ul" id="outbound-links"></ul>
</div>
</div>
<div class="col-lg-7 justify-content-center">
<div class="visualizations">
<canvas id="links-chart" width="410" height="410"></canvas>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="visualizations">
<br><h5 class="text-center dark-font">Key Phrases </h5>
<ul class="vis-ul" id="key-phrases"></ul><br>
<h5 id="word-count-header" class="text-center dark-font">Word Count </h5>
<p class="text-center" id="word-count"></p><br>
<h5 class="website-item text-center dark-font">Average Word Count </h5>
<p class="website-item text-center" id="average-word-count"></p>
</div>
</div>
<div class="col-lg-7 justify-content-center">
<div class="visualizations">
<canvas id="text-chart" width="600" height="400"></canvas>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="visualizations">
<div class="background-2 website-item"></div>
<canvas class="website-item" id="pages-chart" width="850" height="500"></canvas>
<p class="website-item page-chart-subtext text-center">Click a page to statsify. </p>
</div>
</div>
<div id="json-container" class="json-display text-left">
<h5 class="text-center dark-font">JSON Response </h5>
<textarea id="json-display"></textarea>
</div>
</div>
</div>
<div class="contact">
<a href="/contact">Feedback & Questions</a>
</div>
<div id="extension" class="extension">
<a href="https://chrome.google.com/webstore/detail/statsify/nmifmhiilofkndfejgeigkkpmkmlgoeb?hl=en-US&gl=US"
target="_blank">Download Chrome Extension</a>
</div>
</body>
</html>