-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
293 lines (279 loc) · 14.9 KB
/
index.html
File metadata and controls
293 lines (279 loc) · 14.9 KB
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description"
content="Lytical is an open source League of Legends statistics and profile analytics tool for all regions including Garena & WeGame">
<meta name="keywords" content="League of Legends, OP.GG, Lytical, Search Tool, Garena, WeGame, QQ, China, App
Open Source, Desktop, Analytics, League Lytical, LoL, Garena LOL, WeGame LOL, LCU, League, All Regions, OPGG Garena, OP.GG Garena, OP.GG China
OP.GG TW, OPGG TW, OPGG SG, OPGG HK, OPGG TH, OPGG PH, OPGG VN, OPGG Vietnam, OPGG for Garena, SEA OPGG, OPGG SEA, OP.GG for Garena, OP.GG for Vietname,
OP.GG for Taiwan, OP.GG for Singapore, OP.GG for PH, OP.GG for Philippines, U.GG, Blitz.GG, Blitz, U GG, Blitz GG, Multisearch, Match History, League Match History,
Lytical League of Legends, Lyical App, Lytical Desktop, Lytical LoL
">
<meta name="author" content="downthecrop">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
<!-- Primary Meta Tags -->
<title>Lytical - Open Source League of Legends Statistics and Profile Analytics</title>
<meta name="title" content="Lytical - Open Source League of Legends Statistics and Profile Analytics">
<meta name="description"
content="Lytical is an open source League of Legends statistics and profile analytics tool for all regions including Garena & WeGame">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://lytical.app/">
<meta property="og:title" content="Lytical - Open Source League of Legends Statistics and Profile Analytics">
<meta property="og:description"
content="Lytical is an open source League of Legends statistics and profile analytics tool for all regions including Garena & WeGame">
<meta property="og:image" content="https://lytical.app/images/Lytical-social.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://lytical.app/">
<meta property="twitter:title" content="Lytical - Open Source League of Legends Statistics and Profile Analytics">
<meta property="twitter:description"
content="Lytical is an open source League of Legends statistics and profile analytics tool for all regions including Garena & WeGame">
<meta property="twitter:image" content="https://lytical.app/images/Lytical-social.png">
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<title>Lytical - Open Source League of Legends Statistics and Profile Analytics</title>
<link rel="stylesheet" href="styles/main.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul class="menu">
<li class="item"><a href="#overview">Features</a></li>
<li class="item"><a href="#faq">FAQ</a></li>
<li class="item"><a href="https://github.com/LyticalApp/Lytical" target="_new">Code</a>
</li>
<li class="toggle"><a href="#"><i class="fa fa-bars"></i></a></li>
</ul>
</nav>
<section class="presentation" id="top">
<figure class="logo">
<img src="images/Logo.png" alt="Logo">
<h1><strong>Lytical</strong> is an open source League of Legends statistics and profile analytics tool for
all regions including <strong>Garena</strong> & <strong>WeGame</strong></h1>
</figure>
<div class="cta">
<a href="https://github.com/LyticalApp/Lytical/releases/latest" class="download" target="_blanl"><i
class="fa fa-windows"></i> <span>Download</span></a>
<a class="all" href="https://discord.gg/HtU46cBeQ3" target="_new">Discord Server</a><span class="divider"> |
</span><a href="https://github.com/LyticalApp/Lytical" class="fork" target="_blank">GitHub</a>
</div>
<figure class="screen_presentation">
<img src="images/LyticalApp.png" alt="Promo Image">
</figure>
</section>
<!-- Features Overview -->
<section id="overview" style="background-color: #111;">
<h1 style="text-align: center;margin:0; padding-top:40px;">Features</h1>
<div
style="width:100%;margin:0 auto;display: flex;gap:20px;flex-wrap:wrap; justify-content: center;margin-top:40px;">
<!-- Left Box -->
<div>
<img src="./images/MatchHistory.png" alt="Match History">
</div>
<!-- Right Box -->
<div style="max-width:450px;padding:0 40px 0 40px;">
<h2>Match History & In-game Multisearch</h2>
<p> Lytical provides fast OP.GG style match history for any player.
Kills, CS per Minute, Vision Score, and Objectives.
Analyze your contribution to your own games or search high ranked players to increase your impact
and win more games!
<br><br>
In-Game Multisearch can help quickly understand your teammates and opponents strengths and weaknesses.
<br>
<br>
<img class="multisearch hideMultisearch" src="images/ingame-search.png" alt="Multisearch">
</p>
</div>
<br>
</div>
<div style="width:50%;margin:0 auto;border:solid;border-width:1px;border-color:#555555;"></div>
<div
style="width:100%;margin:0 auto;display: flex;gap:20px;flex-wrap:wrap; justify-content: center;margin-top:40px;">
<!-- Left Box -->
<div style="max-width:450px;padding:0 40px 0 40px;">
<h2>Works on all Regions</h2>
<p>Lytical utilizes builtin API's inside of the League of Legends client. This allows
our application to function on all regions, including all Garena and WeGame regions.
<br>
<br>
If you are able to help translate Lytical to another language (no programming experience required)
please make an issue on<a href="https://github.com/LyticalApp/Lytical" target="_new"> GitHub</a>
</p>
<br>
<b>Supported Servers/Regions</b>
<ul style="padding-left:35px;list-style-type: square;">
<li>Garena</li>
<ul style="padding-left:40px;">
<li>The Philippines (PH)</li>
<li>Taiwan, Hong Kong, and Macau (TW/HK)</li>
<li>Vietnam (VN)</li>
<li>Thailand (TH)</li>
<li>Singapore, Malaysia, and Indonesia (SG/MY/ID)</li>
</ul>
<li>QQ/WeGame/Tencent (CN)</li>
<li>Riot Operated (NA/EU/OCE/RU/TR/BR/LAN/KR/JP)</li>
</ul>
</div>
<!-- Right Box -->
<div>
<img src="./images/Language.png" alt="Supports Garena and WeGame">
</div>
</div>
<div style="width:50%;margin:0 auto;border:solid;border-width:1px;border-color:#555555;"></div>
<div
style="width:100%;margin:0 auto;display: flex;gap:20px;flex-wrap:wrap; justify-content: center;margin-top:40px;">
<!-- Left Box -->
<div>
<img src="./images/VueJS.png" alt="Open Source, Built with Vue.js">
</div>
<!-- Right Box -->
<div style="max-width:450px;padding:0 40px 0 40px;">
<h2>Open Source and Ad Free</h2>
<p> The Lytical app is forever free and open source. It was created as an All-In-One replacement for
regions that don't have
access to statistics sites like OP.GG or Blitz.gg.
<br>
<br>
Built Using Vue.JS + Electron Lytical is fast and memory efficient. Any PC can run Lytical in the
background
with no performance impact in game for League of Legends.
<br>
<br>
This application is released under the Open Source GPLv2 license. You are welcome to contribute to
this project in any way
you can.
</p>
<br>
<br>
</div>
<br>
</div>
</section>
<!-- FAQ -->
<section id="faq" style="background-color: rgb(53, 53, 53);text-align: center;width:100%;">
<h1 style="text-align: center;margin:0; padding-top:40px;">FAQ</h1>
<div style="margin:0 auto;margin-top:40px; max-width: max-content;">
<!-- Left Box -->
<!-- Right Box -->
<div style="max-width:750px;padding:0 40px 0 40px;">
<h2>What is Lytical?</h2>
<p>Lytical is an alternative League of Legends statistics app like OP.GG for Garena.
Our platform offers summoner searching, profiles, lobby multisearch, game statistics and more.
If you're looking for OP.GG on Garena (SEA) or WeGame (CN) Lytical is right for you.</p>
</div>
<br>
<div style="max-width:750px;padding:0 40px 0 40px;">
<h2>Can I share a link to my Lytical Profile?</h2>
<p>There is currently no plan to have a web acceisble share feature. Currently the best way to share a
match is taking a screenshot and linking that.</p>
</div>
<br>
<div style="max-width:750px;padding:0 40px 0 40px;">
<h2>Could I be banned for using Lytical?</h2>
<p>
No. Our app only interfaces with builtin and exposed LCU API endpoints. Lytical is forced to follow
the
same rules and rate limits as the official client. It functions more like a better user interface
for the
data that already
exists when searching in League of Legends than a traditional statistics database site.
Our app has even been
<a target="_blank"
href="https://twitter.com/LyticalApp/status/1556229089962315776?s=20&t=VmyV9t9L6XDCKCxmUFEX2w">
approved in the Riot Developer Program</a>
</p>
</div>
<br>
<div style="max-width:750px;padding:0 40px 0 40px;">
<h2>Does Lytical store any user data?</h2>
<p>Lytical does not store, log, or otherwise collect any information on its users.</p>
</div>
<br>
<div style="width:50%;margin:0 auto;border:solid;border-width:1px;border-color:#555555;"></div>
<br>
<div style="max-width:750px;padding:0 40px 0 40px;">
<h2>I have a feature idea! Can you please add it?</h2>
<p>Please create an issue on<a href="https://github.com/LyticalApp/Lytical" target="_new"> GitHub</a> or
post a comment in the Request channel on<a href="https://discord.gg/HtU46cBeQ3" target="_new"><a
href="https://discord.gg/HtU46cBeQ3" target="_new"> Discord</a></a></p>
</div>
<br>
<div style="max-width:750px;padding:0 40px 0 40px;">
<h2>I can't get Lytical to work! How do I fix this?</h2>
<p>Try running as Administrator. If that doesn't work use our<a href="https://discord.gg/HtU46cBeQ3"
target="_new"><a href="https://discord.gg/HtU46cBeQ3" target="_new"> Discord</a></a> server to
ask one of our community members to help</p>
</div>
<br>
<div style="max-width:750px;padding:0 40px 0 40px;">
<h2>Will Lytical work on macOS?</h2>
<p>It would be trivial to adapt this application to macOS if there is demand. Share your feedback on<a
href="https://github.com/LyticalApp/Lytical" target="_new"> GitHub</a> or<a
href="https://discord.gg/HtU46cBeQ3" target="_new"> Discord</a></p>
</div>
<br>
</div>
<br>
<br>
</section>
<section style="width:100%;text-align: center;background-image: linear-gradient(#353535, black);">
<div style="padding:20px;">
<p>created with ❤️ by <a href="https://twitter.com/downthecrop" target="_new">@downthecrop</a></p>
</div>
<a href="#anchor">
<div id="backtotop">Back to Top</div>
<br>
</a>
</section>
<script>
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
const items = document.querySelectorAll(".item");
const backtotop = document.getElementById("backtotop");
/* Toggle mobile menu */
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
toggle.querySelector("a").innerHTML = "<i class='fa fa-bars'></i>";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "<i class='fa fa-times'></i>";
}
}
/* Activate Submenu */
function toggleItem() {
if (this.classList.contains("submenu-active")) {
this.classList.remove("submenu-active");
} else if (menu.querySelector(".submenu-active")) {
menu.querySelector(".submenu-active").classList.remove("submenu-active");
this.classList.add("submenu-active");
} else {
this.classList.add("submenu-active");
}
}
/* Close Submenu From Anywhere */
function closeSubmenu(e) {
if (menu.querySelector(".submenu-active")) {
let isClickInside = menu
.querySelector(".submenu-active")
.contains(e.target);
if (!isClickInside && menu.querySelector(".submenu-active")) {
menu.querySelector(".submenu-active").classList.remove("submenu-active");
}
}
}
/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
if (item.querySelector(".submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
backtotop.addEventListener("mousedown",function(){window.scrollTo(0, 0)})
</script>
</body>
</html>