-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
155 lines (146 loc) · 7.8 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://komali.dev/main.css" />
<style>
#main {
margin-top: 50px;
max-width: 100vw !important;
}
#inner {
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.flag {
display: inline-flex;
flex-direction: column;
vertical-align: -2px;
align-items: center;
}
.flag > img {
position: relative;
max-width: 100%;
max-height: 100%;
overflow: auto;
}
.flag.small {
border-radius: 3px;
width: 1.5em;
margin-left: .25em;
margin-right: .25em;
}
.flag.small > img { border-radius: 3px; }
.flag.large {
max-width: 4em;
max-height: 3em;
margin-left: .25em;
margin-right: .25em;
}
.flag.large > img { border-radius: 5px; }
pre {
margin-left: 0em !important;
}
h3 {
margin-top: 0em;
margin-bottom: 0em;
}
code.hljs {
line-height: 1.2em;
/* font-size: 12px; */
padding-left: 1em;
padding-right: 1em;
padding-top: 0.4em;
padding-bottom: 0.4em;
}
.fdiv {
display: inline-flex;
flex-direction: column;
text-align: center;
width: 4em;
}
.fdiv > * {
display: flex;
}
button {
font-style: normal;
font-size: 12px;
}
.hljs {border-radius:10px;border-width: 0px !important;border: 0 !important;margin: 0 !important;background-color: rgba(1,1,4,.8) !important;margin-top: 0 !important;font-family: "Ubuntu Mono", monospace;display: inline-block !important;overflow-x: auto !important;;margin-left: 0 !important;color: #dcdcdc !important }.hljs-keyword, .hljs-literal, .hljs-name, .hljs-symbol {color: #569cd6 !important }.hljs-link {color: #569cd6 !important;text-decoration: underline !important }.hljs-built_in, .hljs-type {color: #4ec9b0 !important }.hljs-class, .hljs-number {color: #b8d7a3 !important }.hljs-meta-string, .hljs-string {color: #d69d85 !important }.hljs-regexp, .hljs-template-tag {color: #9a5334 !important }.hljs-formula, .hljs-function, .hljs-params, .hljs-subst, .hljs-title {color: #dcdcdc !important }.hljs-comment, .hljs-quote {color: #57a64a !important;font-style: italic !important }.hljs-doctag {color: #608b4e !important }.hljs-meta, .hljs-meta-keyword, .hljs-tag {color: #9b9b9b !important }.hljs-template-variable, .hljs-variable {color: #bd63c5 !important }.hljs-attr, .hljs-attribute, .hljs-builtin-name {color: #9cdcfe !important }.hljs-section {color: gold !important }.hljs-emphasis {font-style: italic !important }.hljs-strong {font-weight: 700 !important }.hljs-bullet, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-selector-tag {color: #d7ba7d !important }.hljs-addition {background-color: #144212 !important;width: 100% !important }.hljs-deletion {background-color: #600 !important;width: 100% !important }
</style>
</head>
<body>
<img src="" id="bg_img" class="background" />
<div id="main">
<div id="inner">
<h1>flags.komali.dev <a href='https://github.com/PrinceKomali/flags' target="_blank"><svg style="width: .8em; height: .8em;margin: 0px 0.05em 0px 0.1em; vertical-align: -0.1em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#000" d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg></a></h1>
I was bored one afternoon and wanted a place to store a <div class="flag small ca-qc"></div> and ended up writing a webscraper and a shell script to go with it and then it all spiraled out of control and now we have this :)<br />
Total flag count as of last commit: <b class="count"></b><br><br>
<h3>Usage</h3>
<code>https://flags.komali.dev/{format}/{code}.png</code><br>
<b>Formats</b><br>
Fixed width: <code>w640</code> <code>w160</code> <code>w40</code> <code>w1280</code> <code>w80</code> <code>w20</code> <code>w2560</code> <code>w320</code><br>
Fixed height: <code>h40</code> <code>h80</code> <code>h60</code> <code>h240</code> <code>h24</code> <code>h120</code> <code>h20</code><br>
There are also svgs: <code>https://flags.komali.dev/svg/{code}.svg</code><br><br>
<h3>Obtaining the files</h3>
If for some reason you'd like to obtain the files locally, you have two options
<pre><code class='sh'>git clone https://github.com/PrinceKomali/flags
# or
mkdir flags
cd flags
curl -sO https://flags.komali.dev/get.sh
bash get.sh # only images</code></pre>
<h3>Contributing</h3>
If you wish to contribute please add your additions to <a href="https://github.com/PrinceKomali/flags/blob/main/get.sh" target="_blank"><code>get.sh</code></a> and submit a pull request, or ask me in my <a href="https://discord.gg/QWCcXMe" target="_blank">discord server</a>
<h3>Load all flags</h3>
<button onclick="load_all_flags(this)">Load! (may take a bit)</button>
<div class="flags">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script src="./autogenerated.js"></script>
<script>
window.onload = _ => {
hljs.highlightAll();
let img_url = `https://islandle.komali.dev/waters/default.png`;
let temp = new Image();
temp.src = img_url;
let bg = document.querySelector("#bg_img");
temp.onload = _ => {
bg.src = img_url;
bg.classList.add('fadein');
}
document.querySelector(".count").innerText = IDs.length.toLocaleString();
load_flags();
}
function load_flags() {
for(let f of document.querySelectorAll('.flag')) {
if(f.children.length > 0) continue;
let code = [...f.classList].at(-1);
let img_url = `w320/${code}.png`;
let img = new Image();
img.src = img_url;
img.onload = _ => {
f.appendChild(img);
f.classList.add('fadein');
f.classList.remove(code);
f.onanimationend = _ => {
f.classList.remove("fadein");
}
}
}
}
function load_all_flags(button) {
if(button) button.innerHTML = button.outerHTML = '';
for(let id of IDs) {
let fdiv = document.createElement("div");
fdiv.classList.add("fdiv");
fdiv.innerHTML = `${id}<br><div class="flag large ${id}"></div>`;
document.querySelector(".flags").appendChild(fdiv);
}
load_flags();
}
</script>
</body>
</html>