forked from triamero/phaser3-bitmapfont-generator
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
54 lines (49 loc) · 5.33 KB
/
Copy pathindex.html
File metadata and controls
54 lines (49 loc) · 5.33 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
<html lang="en"><head><meta charset="utf-8"><title>BitmapFont generator For Phaser3 | triamero</title><meta http-equiv="Content-Security-Policy" content="img-src * 'self' data: https:"><meta http-equiv="Permissions-Policy" content="interest-cohort=()"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"><script src="https://unpkg.com/@popperjs/core@2" crossorigin="anonymous"></script><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script><style>#root {
background-image: url("data/background.webp");
background-repeat: repeat;
border: 1px black solid;
height: 510px;
overflow: auto;
}
@font-face {
font-family: "Roboto";
src: url("fonts/ss.ttf");
font-weight: 100;
}
#lds-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
z-index: 1000;
background: rgba(120,120,120, 0.6);
display: none;
}
.lds-dual-ring {
display: inline-block;
width: 80px;
height: 80px;
margin: auto;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}</style></head><body><div style="font-family: Roboto; position: absolute; visibility: hidden">.</div><nav class="navbar navbar-light bg-light"><div class="container"><h1 class="navbar-brand">Bitmapfont generator for Phaser3</h1><ul class="social-buttons navbar-nav flex-row ml-md-auto d-none d-md-flex align-items-center"><li class="ml-3"><a href="https://github.com/triamero/phaser3-bitmapfont-generator" aria-label="Github" target="_blank"><svg height="32" viewBox="0 0 16 16" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></li></ul></div></nav><div id="lds-wrapper"><div class="lds-dual-ring"></div></div><div class="container"><p style="font-size: 18px">Choose (you may upload file) font, select font size and color. Then download image (.png), map (.xml) and you're breathtaking!</p><p style="font-size: 18px"><b>Privacy notice</b>: data won't be transferred to servers.</p><div class="row"><div class="col-md-4"><div class="form-group"><label for="fontFamily">Font</label><div class="input-group"><select id="fontFamily" class="custom-select"><option value="Roboto">Roboto</option><option value="Arial">Arial</option></select><div class="input-group-append"><button class="btn btn-outline-secondary" type="button" onclick="document.getElementById('fontInput').click()"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg></button></div></div><input id="fontInput" type="file" style="display: none" accept=".ttf, .woff, .woff2, .otf"></div><div class="form-group"><label for="fontSize">Size</label> <input type="number" id="fontSize" class="form-control"></div><div class="form-group"><label for="fontColor">Color</label> <input type="color" id="fontColor" class="form-control"></div><div class="form-group"><label for="symbols">Symbols</label> <textarea id="symbols" class="form-control"></textarea></div><div class="form-check"><input type="checkbox" id="monospaced" class="form-check-input"> <label class="form-check-label" for="monospaced">Monospaced</label></div></div><div class="col-md-8"><div class="card"><div class="card-header"><ul class="nav nav-pills card-header-pills"><li class="nav-item" style="margin: 0 5px 0 5px"><a id="download-png" class="nav-link active">.png</a></li><li class="nav-item" style="margin: 0 5px 0 5px"><a id="download-xml" class="nav-link active">.xml</a></li></ul></div><div class="card-body" style="padding: 0"><div id="root"></div></div></div></div></div></div><script src="dist/app.a6e81a7a9e68a682cc31.js"></script></body></html>