summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--www/css/index.css28
-rw-r--r--www/index.html10
-rw-r--r--www/js/html5ks.js10
3 files changed, 35 insertions, 13 deletions
diff --git a/www/css/index.css b/www/css/index.css
index 2768d76..ffd2f9f 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -28,17 +28,22 @@ body {
background: gray;
font: 22px/27px Playtime, sans-serif;
}
+#all {
+ height: 100%;
+ position: absolute;
+ width: 100%;
+}
h2 {
font: 20px/24px Playtime; /* yes, h2 has *smaller* font */
font-weight: bold;
}
/* warnings */
-#warn-container {
+#interstitial {
visibility: hidden;
cursor: auto;
}
-html.no-js #warn-container {
+html.no-js #interstitial {
visibility: visible;
}
#warn {
@@ -71,7 +76,7 @@ html.no-js #gotit {
display: none;
}
-/* wooo, the real content */
+/* pre-content */
#container, #vid {
cursor: url("../dump/ui/mousecursor.png"), default;
position: absolute;
@@ -98,9 +103,26 @@ html.no-js #gotit {
opacity: 0.5;
z-index: 10;
}
+
+/* dialogs */
#dialogs {
z-index: 50;
+ width: 504px;
+ height: 395px;
+ background: url(../dump/ui/bg-config.png);
+ margin-left: -252px;
+ margin-top: -197.5px;
}
+#options {
+ padding: 10px 20px;
+}
+#return {
+ position: absolute;
+ bottom: 15px;
+ right: 20px;
+}
+
+/* content */
#show {
height: 100%;
}
diff --git a/www/index.html b/www/index.html
index 721a803..ed976ba 100644
--- a/www/index.html
+++ b/www/index.html
@@ -27,8 +27,8 @@
<script src="js/imachine.js"></script>
<script src="js/i18n.js"></script>
</head>
- <body><div id="all" style="height: 100%; position: absolute; width: 100%;">
- <div id="warn-container">
+ <body><div id="all">
+ <div id="interstitial">
<div id="warn">
<h2>We use a lot of new features in this; your browser seems to have some issues...</h2>
<ul id="warns">
@@ -68,13 +68,13 @@
<div class="options-button main_menu_config button"></div>
<div class="quit button main_menu_quit disabled"></div>
</div>
- <div id="version" style="">
+ <div id="version">
Katawa Shoujo v1.1
<br>
HTML5KS 0.1.0
</div>
</div>
- <div id="dialogs" style="display: none; width: 504px; height: 395px; background: url(dump/ui/bg-config.png); margin-left: -252px; margin-top: -197.5px;" class="centered">
+ <div id="dialogs" class="centered" style="display: none;">
<div id="options" style="padding: 10px 20px;">
<h2>Options</h2>
<label class="button"><input type="checkbox" class="option" id="hdisable"> <span class="hdisabled_label"></span></label>
@@ -89,7 +89,7 @@
<label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="soundVolume"> <span class="tr config_sfxvol_label"></span> <span id="test-sound" class="button config_sfxtest_label"><img src="dump/ui/bt-musicplay.png" alt="Play"></span></label>
</div>
<div id="return" class="button" style="position: absolute; bottom: 15px; right: 20px;">
- <img src="dump/ui/bt-return.png" alt="">
+ <img src="dump/ui/bt-return.png">
Return
</div>
</div>
diff --git a/www/js/html5ks.js b/www/js/html5ks.js
index 9ca2bde..c7aba9b 100644
--- a/www/js/html5ks.js
+++ b/www/js/html5ks.js
@@ -179,12 +179,12 @@ window.html5ks = {
},
warnUnsupported: function () {
if (!html5ks.persistent.gotit) {
- var warn = document.getElementById("warn-container");
+ var interstitial = document.getElementById("interstitial");
document.getElementById("gotit").addEventListener("mouseup", function () {
- warn.style.mozAnimation = "0.5s dissolveout";
- warn.style.webkitAnimation = "0.5s dissolveout";
- warn.style.animation = "0.5s dissolveout";
- warn.style.opacity = 0;
+ interstitial.style.mozAnimation = "1s dissolveout";
+ interstitial.style.webkitAnimation = "1s dissolveout";
+ interstitial.style.animation = "1s dissolveout";
+ interstitial.style.opacity = 0;
html5ks.persistent.gotit = true;
html5ks.start();
}, false);