-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
196 lines (174 loc) · 7.48 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
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
<!DOCTYPE html>
<html>
<head>
<!-- TITLE -->
<title>CyberFlameU</title>
<!-- META tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js" integrity="sha256-36hEPcG8mKookfvUVvEqRkpdYV1unP6wvxIqbgdeVhk=" crossorigin="anonymous"></script>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
</head>
<body>
<!-- container -->
<div class="uk-container">
<!-- popup -->
<div id="modal-example" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">WIP button</h2>
<p><stong>You</strong> can sponsor <strong>me</strong> if you want <strong>on my</strong> GitHub page</p>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button" onClick="alert('NEIN!');">Send help</button>
</p>
</div>
</div>
<!-- header -->
<!-- mobile menu -->
<div id="sidenav" uk-offcanvas="flip: true" class="uk-offcanvas uk-hidden@s">
<div class="uk-offcanvas-bar">
<ul class="uk-nav">
<li class="uk-active"><a href="/">Home</a></li>
<li>
<a href="#">Our sites</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="/" class="text">CyberFlameU.github.io</a></li>
<li><a href="http://cyberfla.me" target="_blank" class="text">CyberFla.me</a></li>
<li><a href="http://cyberflame.wtf" target="_blank" class="text">CyberFlame.wtf</a></li>
<li><a href="http://cyberflame.tech" target="_blank" class="text">CyberFlame.tech</a></li>
</ul>
</div>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Our work</a></li>
</ul>
</div>
</div>
<!-- normal menu -->
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left uk">
<ul class="uk-navbar-nav uk-visible@s">
<li><a href="/">Home</a></li>
<li>
<a href="#">Our sites</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="/" class="text">CyberFlameu.github.io</a></li>
<li><a href="http://cyberfla.me" target="_blank" class="text">CyberFla.me</a></li>
<li><a href="http://cyberflame.wtf" target="_blank" class="text">CyberFlame.wtf</a></li>
<li><a href="http://cyberflame.tech" target="_blank" class="text">CyberFlame.tech</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-visible@s">
<li><a href="#">About</a></li>
<li><a href="#">Our work</a></li>
</ul>
<a class="uk-navbar-item uk-navbar-toggle uk-hidden@s" uk-toggle="target: #sidenav" uk-navbar-toggle-icon></a>
</div>
</nav>
<!-- content -->
<div class="content">
<a href="#modal-example" uk-toggle class="uk-button uk-button-default uk-align-center uk-padding" id="thebtn"><h3>Do <strong>things</strong> and <strong>stuff!</strong></h3></a>
<div>Cyberflame's subs: <span id="cSubs"></span> EdazPotato's subs: <span id="eSubs"></span></div>
<div id="text"></div>
</div>
<!-- footer -->
<div class="footer">
<div class="uk-alert-primary" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>This site is <i>open sorce</i>. That means that <b>you</b> can add to it over on <a href="https://github.com/cyberflameu/cyberflameu.github.io" class="uk-button uk-button-link" target="_blank">github</a>!</p>
</div>
</div>
</div>
<script>
/*
$.getJSON('https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UChNnX9oGYAG-25aIAY_czbA&key=AIzaSyCC4CFoEwccgz8FZbJ6ZU9LXLh4G1m1ToQ', function(data) {
//data is the JSON string
doument.getElementById('cSubs').innerHtml = data.items.statistics.subscriberCount;
});
$.getJSON('https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UCK1ME1J0XNbN31bCOV9UjKw&key=AIzaSyCC4CFoEwccgz8FZbJ6ZU9LXLh4G1m1ToQ', function(data) {
//data is the JSON string
doument.getElementById('eSubs').innerHtml = data.items.statistics.subscriberCount;
});
*/
var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send();
};
getJSON('https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UChNnX9oGYAG-25aIAY_czbA&key=AIzaSyCC4CFoEwccgz8FZbJ6ZU9LXLh4G1m1ToQ',
function(err, data) {
if (err !== null) {
alert('Something went wrong: ' + err);
} else {
alert('Your query count: ' + data.query.count);
}
});
getJSON('https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UCK1ME1J0XNbN31bCOV9UjKw&key=AIzaSyCC4CFoEwccgz8FZbJ6ZU9LXLh4G1m1ToQ',
function(err, data) {
if (err !== null) {
alert('Something went wrong: ' + err);
} else {
alert('Your query count: ' + data.query.count);
}
});
// Create event listener
//document.onLoad(loadText());
document.getElementById('thebtn').addEventListener('click', loadText);
function loadText(){
// Create XHR Object
var xhr = new XMLHttpRequest();
// OPEN - type, url/file, async
xhr.open('GET', 'lorem.txt', true);
console.log('READYSTATE: ', xhr.readyState);
// OPTIONAL - used for loaders
/*xhr.onprogress = function(){
console.log('READYSTATE: ', xhr.readyState);
}
*/
xhr.onload = function(){
console.log('READYSTATE: ', xhr.readyState);
if(this.status == 200){
//console.log(this.responseText);
document.getElementById('text').innerHTML = this.responseText;
} else if(this.status = 404){
document.getElementById('text').innerHTML = 'Not Found';
}
}
xhr.onerror = function(){
console.log('Request Error...');
}
// Sends request
xhr.send();
}
// readyState Values
// 0: request not initialized
// 1: server connection established
// 2: request received
// 3: processing request
// 4: request finished and response is ready
// HTTP Statuses
// 200: "OK"
// 403: "Forbidden"
// 404: "Not Found"
</script>
</body
</html>