225 lines
9.0 KiB
HTML
225 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Retro-Go theme creator</title>
|
|
<style>
|
|
body {
|
|
font-family: "Consolas", "Monaco", "Lucida Console", monospace;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
#container {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
#left-pane {
|
|
width: 49%;
|
|
float: left;
|
|
}
|
|
#right-pane {
|
|
width: 49%;
|
|
float: right;
|
|
}
|
|
#preview {
|
|
transform: scale(2);
|
|
transform-origin: 0 0;
|
|
width: 320px;
|
|
height: 240px;
|
|
border: 1px solid black;
|
|
position: relative;
|
|
background-color: black;
|
|
color: white;
|
|
font-size: 12px;
|
|
}
|
|
#preview * {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
#preview .header {
|
|
width: 320px;
|
|
height: 56px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
#preview .logo {
|
|
width: 47px;
|
|
height: 51px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
#preview .banner {
|
|
width: 272px;
|
|
height: 32px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 48px;
|
|
}
|
|
#preview .status {
|
|
width: 128px;
|
|
position: absolute;
|
|
top: 35px;
|
|
left: 58px;
|
|
}
|
|
#preview .notification {
|
|
width: 104px;
|
|
position: absolute;
|
|
top: 35px;
|
|
left: 216px;
|
|
color: green;
|
|
text-align: right;
|
|
}
|
|
#preview .list {
|
|
width: 128px;
|
|
position: absolute;
|
|
top: 56px;
|
|
left: 0px;
|
|
height: 184px;
|
|
width: 100%;
|
|
background-image: linear-gradient(black, blue);
|
|
}
|
|
#preview .list > div {
|
|
height: 1em;
|
|
}
|
|
#preview .list .normal {
|
|
color: #AAA;
|
|
}
|
|
</style>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Theme creator</h1>
|
|
<div id="container">
|
|
<div id="left-pane">
|
|
<form id="controls" autocomplete="off">
|
|
<div class="input">Header > Background color: <input id="header-color-bg" type="color" value="#000000"></div>
|
|
<div class="input">Header > Foreground color: <input id="header-color-fg" type="color" value="#FFFFFF"></div>
|
|
<div class="input">List > Background color 1: <input id="list-color-bg1" type="color" value="#000000"></div>
|
|
<div class="input">List > Background color 2: <input id="list-color-bg2" type="color" value="#0000FF"></div>
|
|
<div class="input">List > Normal text color: <input id="list-color-txt-fg" type="color" value="#848284"></div>
|
|
<div class="input">List > Normal text background: <input id="list-color-txt-bg" type="color" value="#00000000"></div>
|
|
<div class="input">List > Selected text color: <input id="list-color-sel-fg" type="color" value="#FFFFFF"></div>
|
|
<div class="input">List > Selected text background: <input id="list-color-sel-bg" type="color" value="#00000000"></div>
|
|
<div class="input">Dialog > Background color: <input id="dialog-color-bg" type="color" value="#000000"></div>
|
|
<div class="input">Dialog > Foreground color: <input id="dialog-color-fg" type="color" value="#FFFFFF"></div>
|
|
<input id="reset-all" type="reset">
|
|
</form>
|
|
<hr>
|
|
<textarea id="theme-data" cols="40" rows="15"></textarea>
|
|
</div>
|
|
<div id="right-pane">
|
|
<div id="preview">
|
|
<div class="header">
|
|
<img class="logo" src="../launcher/images/logo_nes.png">
|
|
<img class="banner" src="../launcher/images/header_nes.png">
|
|
<div class="battery">
|
|
|
|
</div>
|
|
<div class="status">
|
|
Games: 100
|
|
</div>
|
|
<div class="notification">
|
|
CRC32
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="normal">MY VERY VERY LONG GAME.NES</div>
|
|
<div class="normal">MY VERY VERY LONG GAME.NES</div>
|
|
<div class="normal">MY VERY VERY LONG GAME.NES</div>
|
|
<div class="normal">MY VERY VERY VERY LONG GAME.NES</div>
|
|
<div class="normal">MY VERY VERY LONG GAME.NES</div>
|
|
<div class="normal">MY VERY VERY LONG GAME.NES</div>
|
|
<div class="normal">MY VERY VERY LONG GAME.NES</div>
|
|
<div class="selected">SELECTED GAME NAME.NES</div>
|
|
<div class="normal">OTHER GAME NAME.NES</div>
|
|
<div class="normal">OTHER GAME NAME.NES</div>
|
|
<div class="normal">OTHER GAME NAME.NES</div>
|
|
<div class="normal">OTHER GAME NAME.NES</div>
|
|
<div class="normal">OTHER GAME NAME.NES</div>
|
|
<div class="normal">OTHER GAME NAME.NES</div>
|
|
<div class="normal">OTHER GAME NAME.NES</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function main() {
|
|
let colors = {
|
|
header_bg: $('#header-color-bg'),
|
|
header_fg: $('#header-color-fg'),
|
|
list_bg1: $('#list-color-bg1'),
|
|
list_bg2: $('#list-color-bg2'),
|
|
list_txt_bg: $('#list-color-txt-bg'),
|
|
list_txt_fg: $('#list-color-txt-fg'),
|
|
list_sel_bg: $('#list-color-sel-bg'),
|
|
list_sel_fg: $('#list-color-sel-fg'),
|
|
dialog_bg: $('#dialog-color-bg'),
|
|
dialog_fg: $('#dialog-color-fg'),
|
|
};
|
|
|
|
function css2rg(color) {
|
|
|
|
}
|
|
|
|
function rg2css(color) {
|
|
|
|
}
|
|
|
|
function updateColors() {
|
|
$('#preview .header').css({"color": colors.header_fg.val(), "background-color": colors.header_bg.val()});
|
|
$('#preview .list .normal').css({"color": colors.list_txt_fg.val()}); // , "background-color": colors.list_txt_bg.val()
|
|
$('#preview .list .selected').css({"color": colors.list_sel_fg.val()}); // , "background-color": colors.list_sel_bg.val()
|
|
$('#preview .list').css({"background-image": "linear-gradient(" + colors.list_bg1.val() + ", " + colors.list_bg2.val() + ")"});
|
|
}
|
|
|
|
function updateData() {
|
|
let data = {};
|
|
for (let key in colors) {
|
|
data[key] = colors[key].val();
|
|
}
|
|
$('#theme-data').val(JSON.stringify(data, null, 2));
|
|
}
|
|
|
|
$('#controls input').change(function() {
|
|
updateColors();
|
|
updateData();
|
|
});
|
|
|
|
$('#reset-all').mouseup(function() {
|
|
setTimeout(function() {
|
|
updateColors();
|
|
updateData();
|
|
}, 50);
|
|
});
|
|
|
|
$('#theme-data').on("keyup change", function() {
|
|
try {
|
|
let data = JSON.parse(this.value);
|
|
for (let key in colors) {
|
|
colors[key].val(data[key]);
|
|
}
|
|
updateColors();
|
|
} catch(err) {
|
|
// ignore
|
|
}
|
|
});
|
|
|
|
updateColors();
|
|
updateData();
|
|
}
|
|
|
|
// This nonsense is to make it work in htmlpreview.github.io
|
|
if (typeof $ != 'undefined') {
|
|
main();
|
|
} else {
|
|
script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
|
|
script.onload = main;
|
|
document.getElementsByTagName('head')[0].appendChild(script);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |