-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (111 loc) · 3.68 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>noktu.site</title>
<link rel="icon" href="img/favicon.svg">
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
//detect dark mode
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
var dark = true
};
</script>
<script>
text = true
setInterval(()=> {
if (text == true) {
document.title = "\u200E";
text = false;
} else {
document.title = "noktu.site";
text = true;
};
}, 250)
</script>
<style>
/*change selection colour*/
::-moz-selection { /*firefox*/
color: #7851a9;
}
::selection {
color: #7851a9;
background: white;
}
.filterwhite{
filter: invert(95%);
}
.btn {
height: 64px;
width: 64px;
margin: 4px;
}
</style>
</head>
<body style="background-color: white;">
<h1 id="bigtext" style="margin-top: 128px; font-size: 96px; text-align: center;">noktu.site</h1>
<div style="text-align: center;" id="buttons"></div>
<h3 id="dumb" style="text-align: center; margin-top: .67em;">hi</h3>
<div id="particles-js" style="position: absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1;"></div>
<script>
//load particlesjs config
var rq = new XMLHttpRequest();
rq.onload = function() {
particlesJS("particles-js", JSON.parse(rq.responseText));
};
rq.open("GET", "data/particlesjs-config.json")
rq.send(null)
//load social media links
var rr = new XMLHttpRequest();
rr.onload = function() {
if (dark == true) {
document.body.style.background = "#1C1C1C";
let elements = document.querySelectorAll("#bigtext, #dumb")
elements.forEach(function(v) {
v.style.color = "#FFFFFF";
});
console.log(elements)
};
for (const [key, value] of Object.entries(JSON.parse(rr.responseText))) {
const url = document.createElement("a");
url.href = value.url;
url.id = key + "img";
const button = document.createElement("button");
//button.style = "height: 64px; width: 64px; margin: 4px;";
button.classList.add('btn');
button.id = key;
const bimage = document.createElement("img");
bimage.src = value.logo;
if (dark == true) {
button.className = "btn btn-dark";
bimage.className = "filterwhite";
} else {
button.className = "btn btn-light";
};
document.getElementById('buttons').appendChild(url);
document.getElementById(url.id).appendChild(button);
document.getElementById(key).appendChild(bimage);
};
};
rr.open("GET", "data/thing.json")
rr.send(null)
</script>
<script>
//fit text onto screen
if (screen.width < 412 ) {
document.getElementById("bigtext").style.fontSize = screen.width/8 + "px";
}
function reportWindowSize() {
if (window.innerWidth < 412 ) {
document.getElementById("bigtext").style.fontSize = window.innerWidth/8 + "px";
} else if (document.getElementById("bigtext").style.fontSize != "96px") {
document.getElementById("bigtext").style.fontSize = "96px"
}
}
window.onresize = reportWindowSize;
</script>
</body>
</html>