summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/css/index.css105
-rw-r--r--www/index.html26
-rw-r--r--www/js/api.js4
-rw-r--r--www/js/menu.js2
4 files changed, 110 insertions, 27 deletions
diff --git a/www/css/index.css b/www/css/index.css
index b94f40d..c2c3f9c 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -101,23 +101,69 @@ html.no-js #gotit {
/* dialogs */
#dialogs {
- background: url("../dump/ui/bg-config.png");
z-index: 50;
width: 504px;
height: 395px;
margin-left: -252px;
margin-top: -197.5px;
}
+.no-webp #dialogs {
+ background: url("../dump/ui/bg-config.png");
+}
.webp #dialogs {
background: url("../dump/ui/bg-config.webp");
}
-#options {
+#dialogs > div {
+ display: none;
padding: 10px 20px;
}
+.config_sfxtest_label {
+ padding-left: 24px;
+ background-repeat: no-repeat;
+}
+.no-webp .config_sfxtest_label {
+ background-image: url("../dump/ui/bt-musicplay.png");
+}
+.webp .config_sfxtest_label {
+ background-image: url("../dump/ui/bt-musicplay.webp");
+}
+.config_language_sel {
+ padding-left: 24px;
+ background-repeat: no-repeat;
+}
+.no-webp .config_language_sel {
+ background-image: url("../dump/ui/bt-language.png");
+}
+.webp .config_language_sel {
+ background-image: url("../dump/ui/bt-language.webp");
+}
+.saves {
+ overflow-y: scroll;
+ height: 260px;
+ width: 450px;
+}
+.new_save_button {
+ padding-left: 30px;
+ background-repeat: no-repeat;
+}
+.no-webp .new_save_button {
+ background-image: url("../dump/ui/bt-star.png");
+}
+.webp .new_save_button {
+ background-image: url("../dump/ui/bt-star.webp");
+}
#return {
position: absolute;
bottom: 15px;
right: 20px;
+ padding-left: 30px;
+ background-repeat: no-repeat;
+}
+.no-webp #return {
+ background-image: url("../dump/ui/bt-return.png");
+}
+.webp #return {
+ background-image: url("../dump/ui/bt-return.webp");
}
/* content */
@@ -128,13 +174,15 @@ html.no-js #gotit {
position: absolute;
}
#window {
- background: url("../dump/ui/bg-say.png");
width: 800px;
height: 160px;
position: absolute;
top: 440px;
left: 0;
}
+.no-webp #window {
+ background: url("../dump/ui/bg-say.png");
+}
.webp #window {
background: url("../dump/ui/bg-say.webp");
}
@@ -156,15 +204,18 @@ html.no-js #gotit {
left: 28px;
}
#nvl {
- background: url("../dump/ui/bg-nvl.png") no-repeat top left;
+ background: white no-repeat top left;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
+.no-webp #nvl {
+ background-image: url("../dump/ui/bg-nvl.png");
+}
.webp #nvl {
- background: url("../dump/ui/bg-nvl.webp") no-repeat top left;
+ background-image: url("../dump/ui/bg-nvl.webp");
}
#nvlsay {
padding: 15px 35px;
@@ -179,12 +230,14 @@ html.no-js #gotit {
right: 10px;
width: 16px;
height: 16px;
- background-image: url("../dump/ui/ctc.png");
-o-animation: blink 2s infinite linear;
-moz-animation: blink 2s infinite linear;
-webkit-animation: blink 2s infinite linear;
animation: blink 2s infinite linear;
}
+.no-webp .ctc {
+ background-image: url("../dump/ui/ctc.png");
+}
.webp .ctc {
background-image: url("../dump/ui/ctc.webp");
}
@@ -224,14 +277,29 @@ html.no-js #gotit {
right: 10px;
display: none;
}
+.no-webp #auto {
+ background: url("dump/ui/sd-auto.png");
+}
+.webp #auto {
+ background: url("dump/ui/sd-auto.webp");
+}
+.no-webp #skip {
+ background: url("dump/ui/sd-skip.png");
+}
+.webp #skip {
+ background: url("dump/ui/sd-skip.webp");
+}
#choices {
left: 0;
}
.webp .choice {
- background: url("../dump/ui/bg-choice.webp") no-repeat top center;
+ background-image: url("../dump/ui/bg-choice.webp");
+}
+.no-webp .choice {
+ background-image: url("../dump/ui/bg-choice.png");
}
.choice {
- background: url("../dump/ui/bg-choice.png") no-repeat top center;
+ background: white no-repeat top center;
text-align: center;
height: 35px;
line-height: 30px;
@@ -241,10 +309,13 @@ html.no-js #gotit {
text-align: center;
}
.webp #context-menu {
- background: url("../dump/ui/bg-gm.webp") no-repeat top center;
+ background-image: url("../dump/ui/bg-gm.webp");
+}
+.no-webp #context-menu {
+ background-image: url("../dump/ui/bg-gm.png");
}
#context-menu {
- background: url("../dump/ui/bg-gm.png") no-repeat top center;
+ background: white no-repeat top center;
margin-top: -210px;
padding-top: 60px;
position: absolute;
@@ -266,6 +337,11 @@ html.no-js #gotit {
}
/* main menu */
+#main-menu-buttons {
+ top: 377px;
+ position: absolute;
+ left: 81px;
+}
#main-menu-buttons .button {
margin: 4px;
}
@@ -297,16 +373,17 @@ input[type="checkbox"] {
.webp input[type="checkbox"] + span:before {
background-image: url("../dump/ui/bt-cf-unchecked.webp");
}
-input[type="checkbox"] + span:before {
+.no-webp input[type="checkbox"] + span:before {
background-image: url("../dump/ui/bt-cf-unchecked.png");
+}
+input[type="checkbox"] + span:before {
display: inline-block;
height: 19px;
width: 20px;
content: "";
- background-position: left bottom;
- background-repeat: no-repeat;
+ background: white left bottom no-repeat;
}
-input[type="checkbox"]:checked + span:before {
+.no-webp input[type="checkbox"]:checked + span:before {
background-image: url("../dump/ui/bt-cf-checked.png");
}
.webp input[type="checkbox"]:checked + span:before {
diff --git a/www/index.html b/www/index.html
index 357cab6..600b52f 100644
--- a/www/index.html
+++ b/www/index.html
@@ -48,11 +48,11 @@
</div>
<div id="choices" class="centered"></div>
<div id="centered" class="centered say"></div>
- <img class="status" id="auto" src="dump/ui/sd-auto.png" alt="Auto">
- <img class="status" id="skip" src="dump/ui/sd-skip.png" alt="Skip">
+ <span class="status" id="auto" alt="Auto">
+ <span class="status" id="skip" alt="Skip">
</div>
<div id="main-menu" style="display: none;">
- <div id="main-menu-buttons" style="top: 377px; position: absolute; left: 81px;">
+ <div id="main-menu-buttons">
<div id="start" class="button main_menu_start disabled"></div>
<div id="load" class="button main_menu_load disabled"></div>
<div id="extras" class="button main_menu_extra disabled"></div>
@@ -66,7 +66,7 @@
</div>
</div>
<div id="dialogs" class="centered" style="display: none;">
- <div id="options" style="padding: 10px 20px;">
+ <div id="options">
<h2 class="config_page_caption"></h2>
<label class="button"><input type="checkbox" class="option" id="hdisable"> <span class="hdisabled_label"></span></label>
<label class="button"><input type="checkbox" class="option" id="skipUnread"> <span class="config_skip_unseen_label"></span></label>
@@ -76,14 +76,20 @@
<label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="autoModeDelay"> <span class="config_afmspeed_label"></span></label>
<label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="musicVolume"> <span class="config_musicvol_label"></span></label>
- <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="sfxVolume"> <span class="config_sfxvol_label"></span> <span id="test-sound" class="button config_sfxtest_label"><img src="dump/ui/bt-musicplay.png" alt="Play"></span></label>
+ <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="sfxVolume"> <span class="config_sfxvol_label"></span> <span id="test-sound" class="button config_sfxtest_label"></span></label>
- <label class="button disabled" id="language"><img src="dump/ui/bt-language.png"> <span class="config_language_sel"></span></label>
+ <label class="button disabled config_language_sel"></label>
</div>
- <label id="return" class="button" style="position: absolute; bottom: 15px; right: 20px;">
- <img src="dump/ui/bt-return.png">
- <span class="return_button_text"></span>
- </label>
+ <div id="load_dlg">
+ <h2 class="load_page_caption"></h2>
+ <div class="saves"></div>
+ </div>
+ <div id="save_dlg">
+ <h2 class="save_page_caption"></h2>
+ <div class="saves"></div>
+ <div class="button new_save_button"></div>
+ </div>
+ <label id="return" class="button return_button_text"></label>
</div>
<div id="context" style="display: none;">
<div id="context-menu" class="centered">
diff --git a/www/js/api.js b/www/js/api.js
index 12e8ecc..46e8f54 100644
--- a/www/js/api.js
+++ b/www/js/api.js
@@ -37,7 +37,6 @@ window.html5ks.api = {
_loadMedia: function (el, src, types) {
var i = 0;
var _nextType = function () {
- i++;
for (; i < types.length; i++) {
var type = types[i];
if (el.canPlayType(type[0])) {
@@ -46,7 +45,6 @@ window.html5ks.api = {
return true;
}
}
- return false;
};
html5ks.spin(1);
@@ -58,7 +56,7 @@ window.html5ks.api = {
el.onerror = function (e) {
if (e.code === e.MEDIA_ERR_SRC_NOT_SUPPORTED) {
- if (_nextType()) {
+ if (_nextType(++i)) {
console.warn("browser claimed support for " + types[i-1] + " but failed");
} else {
console.error("no media formats supported");
diff --git a/www/js/menu.js b/www/js/menu.js
index 89eceef..eb87111 100644
--- a/www/js/menu.js
+++ b/www/js/menu.js
@@ -26,6 +26,8 @@ html5ks.menu = {
dialogs: document.getElementById("dialogs"),
dialog: {
options: document.getElementById("options"),
+ load: document.getElementById("load_dlg"),
+ save: document.getElementById("save_dlg"),
retn: document.getElementById("return")
},
mainMenu: document.getElementById("main-menu"),
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-21 18:38:10 +0000