-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
121 lines (102 loc) · 5.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
<!doctype html>
<html lang="en">
<head>
<title>Super Game Boy Border Injector</title>
<meta name="description" content="This tool can easily inject a Super Game Boy border into a Game Boy ROM."/>
<meta name="keywords" content="super, game, boy, border, injector, sgb, snes"/>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link type="text/css" rel="stylesheet" href="web-injector/app/style.css" media="all"/>
<link rel="shortcut icon" href="web-injector/assets/favicon.png" type="image/png" sizes="16x16"/>
<!-- social network metatags -->
<meta name="twitter:site" content="@marc_robledo">
<meta name="twitter:creator" content="@marc_robledo">
<meta name="twitter:domain" content="marcrobledo.com">
<meta property="og:title" content="Super Game Boy Border Injector">
<meta name="twitter:title" content="Super Game Boy Border Injector">
<meta name="twitter:description" content="This tool can easily inject a Super Game Boy border into a Game Boy ROM.">
<meta property="og:image" content="https://www.marcrobledo.com/super-game-boy-border-injector/web-injector/assets/thumbnail.jpg">
<meta name="twitter:image" content="https://www.marcrobledo.com/super-game-boy-border-injector/web-injector/assets/thumbnail.jpg">
<meta name="twitter:card" content="photo">
<script src="web-injector/app/cash.min.js"></script>
<script src="web-injector/app/FileSaver.min.js"></script>
<script type="module" src="web-injector/app/main.js"></script>
</head>
<body>
<div style="flex-grow:1; display:flex; align-items:center;">
<div id="wrapper">
<main>
<header>
<h1 class="hide">Super Game Boy Border Injector</h1>
<img id="logo" src="web-injector/assets/logo.png" loading="lazy" alt="Super Game Boy Border Injector logo" />
<hr/>
</header>
<div id="intro">
<div class="text-center mt-10 mb-10">
<a id="btn-donate" href="https://www.paypal.com/paypalme/marcrobledo/5" target="_blank"><img src="web-injector/assets/octicon_heart.svg" alt="love" class="octicon" /> Donate</a>
</div>
<p>This tool allows you to easily add a Super Game Boy border to your favorite Game Boy game!* <small>(most of the Game Boy library should be compatible)</small></p>
<p>Convert an image to SGB border data files easily with <a href="https://www.marcrobledo.com/super-game-boy-border-converter" target="_blank">Super Game Boy Border Converter</a>.</p>
</div>
<div id="picker-rom" class="picker clickable">
<span id="picker-status-rom" class="picker-status"></span>
<div>
<div id="picker-title-rom" class="picker-title">ROM file</div>
<div id="picker-message-rom" class="picker-message mono"></div>
</div>
</div>
<div id="picker-border-map" class="picker clickable">
<span id="picker-status-border-map" class="picker-status"></span>
<div>
<div id="picker-title-border-map" class="picker-title">SGB border map</div>
<div id="picker-message-border-map" class="picker-message mono"></div>
</div>
</div>
<div id="picker-border-tiles" class="picker clickable">
<span id="picker-status-border-tiles" class="picker-status"></span>
<div>
<div id="picker-title-border-tiles" class="picker-title">SGB border tiles</div>
<div id="picker-message-border-tiles" class="picker-message mono"></div>
</div>
</div>
<div id="picker-border-palettes" class="picker clickable">
<span id="picker-status-border-palettes" class="picker-status"></span>
<div>
<div id="picker-title-border-palettes" class="picker-title">SGB border palettes</div>
<div id="picker-message-border-palettes" class="picker-message mono"></div>
</div>
</div>
<div id="picker-custom-gb-palette" class="picker">
<span id="picker-status-custom-gb-palette" class="picker-status clickable"></span>
<div style="flex-grow:1; display:flex; justify-content: space-between; align-items:center;">
<div id="picker-title-custom-gb-palette" class="picker-title">Custom GB palette</div>
<div>
<input type="color" id="input-color0" value="#e0f8d0" />
<input type="color" id="input-color1" value="#88c070" />
<input type="color" id="input-color2" value="#346856" />
<input type="color" id="input-color3" value="#081820" />
</div>
</div>
</div>
<input type="file" id="input-file-rom" accept=".gb,.gbc" class="hide" />
<input type="file" id="input-file-border-map" accept=".bin,.sgb" class="hide" />
<input type="file" id="input-file-border-tiles" accept=".bin,.sgb" class="hide" />
<input type="file" id="input-file-border-palettes" accept=".bin,.sgb" class="hide" />
</main>
<aside>
<div id="container-preview">
<canvas id="canvas-preview" width="256" height="224"></canvas>
</div>
<div>
<button type="button" id="btn-build" class="btn btn-primary" disabled><img src="web-injector/assets/octicon_package_dependents.svg" class="octicon" /> Build SGB ROM</button>
</div>
</aside>
</div>
</div>
<footer>
Super Game Boy Border Injector v1.3<br/>
made with <span class="love" title="Super love">Super <img src="web-injector/assets/octicon_heart_color.svg" alt="love" class="octicon" /></span> by <a href="https://www.marcrobledo.com" target="_blank">Marc Robledo</a>
<img src="web-injector/assets/octicon_github.svg" alt="GitHub logo" class="octicon" /> <a href="https://github.com/marcrobledo/super-game-boy-border-injector/" target="_blank">See sourcecode in GitHub</a>
</footer>
</body>
</html>