diff options
-rw-r--r-- | lighttpd.conf | 17 | ||||
-rw-r--r-- | www/index.css | 46 | ||||
-rw-r--r-- | www/index.html | 33 | ||||
-rw-r--r-- | www/js/html5ks.js | 33 | ||||
-rw-r--r-- | www/js/lib/jquery-2.0.2.min.js (renamed from www/js/jquery-2.0.2.min.js) | 0 | ||||
-rw-r--r-- | www/js/lib/modernizr.custom.71672.js (renamed from www/js/modernizr.custom.71672.js) | 0 | ||||
l--------- | www/js/lib/when | 1 | ||||
l--------- | www/when | 1 |
8 files changed, 92 insertions, 39 deletions
diff --git a/lighttpd.conf b/lighttpd.conf index 745a5d7..24b2bf2 100644 --- a/lighttpd.conf +++ b/lighttpd.conf @@ -1,23 +1,32 @@ server.document-root = var.CWD + "/www" server.port = 8080 + mimetype.assign = ( ".css" => "text/css", ".html" => "text/html; charset=utf-8", ".jpg" => "image/jpeg", ".js" => "text/javascript", - ".mkv" => "video/x-matroska", +# ".mkv" => "video/x-matroska", ".ogg" => "audio/ogg", ".png" => "image/png", ".svg" => "image/svg+xml", - ".ttf" => "application/x-font-ttf", +# ".ttf" => "application/x-font-ttf", ".txt" => "text/plain; charset=utf-8", ".webm" => "video/webm", ".webp" => "image/webp", ".woff" => "application/font-woff" ) + index-file.names = ("index.html") + dir-listing.activate = "enable" -server.modules = ( "mod_compress", "mod_expire" ) -expire.url = ("/dump/" => "access plus 1 years") + +server.modules = ( "mod_compress", "mod_expire", "mod_setenv" ) + +expire.url = ("/dump/" => "access plus 1 years", "/js/lib/" => "access plus 1 days") +setenv.add-response-header += ( + "Cache-Control" => "public" +) + compress.cache-dir = "/tmp/lighttpd-compress" compress.filetype = ("text/html", "text/plain", "text/css", "text/javascript") diff --git a/www/index.css b/www/index.css index e39fa2a..b91d4bc 100644 --- a/www/index.css +++ b/www/index.css @@ -31,10 +31,11 @@ body { left: -190px; } } -#bg,#video,#solid { +#bg,#vid,#solid { position: absolute; width: 800px; height: 600px; + filter: url(filters.svg#sunset); } #say { color: white; @@ -53,20 +54,43 @@ body { top: 440px; left: 0; } -noscript { - position: absolute; - top: 20%; - width: 600px; +#warn { + background-color: rgb(128, 128, 128); + background-color: rgba(128, 128, 128, 0.8); + border-radius: 10px 10px; + cursor: auto; + display: none; + height: 70%; left: 50%; margin-left: -300px; - display: block; - cursor: auto; -} -#noscript { - margin: auto; - background-color: gray; + overflow: auto; + padding: 10px; + position: absolute; + top: 10%; + width: 600px; + z-index: 10; } #notwork { font: 44px/46px Playtime; font-weight: bold; } +html.js #warn li#js { display: none; } +html.video #warn li#video { display: none; } +html.audio #warn li#audio { display: none; } +html.fontface #warn li#fontface { display: none; } +html.csstransforms #warn li#csstransforms { display: none; } +html.csstransitions #warn li#csstransitions { display: none; } +html #warn li#html-svg-filter { display: none; } +.button { + cursor: pointer; + opacity: 0.4; +} +.button:hover { + opacity: 1; +} +#gotit { + text-align: center; +} +html.no-js #gotit { + display: none; +} diff --git a/www/index.html b/www/index.html index 4c7fb23..1ab21f7 100644 --- a/www/index.html +++ b/www/index.html @@ -1,12 +1,9 @@ <!DOCTYPE html> -<html> +<html class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=800, height=600, initial-scale=1, maximum-scale=1"> <title>Katawa Shoujo</title> - <link rel="shortcut icon" type="image/png" href="/dump/ui/icon.png"> - <link rel="apple-touch-icon" href="/dump/ui/icon.png"> - <link rel="stylesheet" type="text/css" href="index.css"> <script> window.define = function(factory) { try{ delete window.define; } catch(e){ window.define = void 0; } // IE @@ -14,9 +11,12 @@ }; window.define.amd = {}; </script> - <script src="/when/when.js"></script> - <script src="/js/jquery-2.0.2.min.js"></script> - <script src="/js/modernizr.custom.71672.js"></script> + <link rel="shortcut icon" type="image/png" href="/dump/ui/icon.png"> + <link rel="apple-touch-icon" href="/dump/ui/icon.png"> + <link rel="stylesheet" type="text/css" href="index.css"> + <script src="/js/lib/when/when.js"></script> + <script src="/js/lib/jquery-2.0.2.min.js"></script> + <script src="/js/lib/modernizr.custom.71672.js"></script> <script src="/js/html5ks.js"></script> <script src="/js/play.js"></script> <script src="/js/images.js"></script> @@ -24,10 +24,19 @@ <script src="/js/script-a1-monday.js"></script> </head> <body> - <noscript><div id="noscript"><div id="notwork">This Site Totally Doesn't Work Without JavaScript.</div>Like, at all. Sorry. If you enable it and reload this page you'll be good to go. <a href="http://enable-javascript.com/">Don't know how?</a></div></noscript> - <audio id="music" loop></audio> - <audio id="sound"></audio> - <audio id="ambient" loop></audio> + <div id="warn"> + <div id="notwork">We use a lot of new features in this; your browser seems to have some issues...</div> + <ul> + <li id="js">It doesn't seem to have JavaScript enabled. This site doesn't work at all without it. Really. <a href="http://enable-javascript.com">Don't know how to enable JS?</a></li> + <li id="video">It doesn't seem to support <a href="https://en.wikipedia.org/wiki/HTML5_video">HTML5 video</a>, which means that you won't be able to see any of the videos (obviously). Unless stated below, though, transitions should still work. <a href="http://caniuse.com/#feat=video">You should strongly consider upgrading.</a></li> + <li id="audio">It doesn't seem to support <a href="https://en.wikipedia.org/wiki/HTML5_audio">HTML5 audio</a>, which means you won't be able to hear any of the amazing music. <a href="http://caniuse.com/#feat=audio">You should strongly consider upgrading.</a></li> + <li id="fontface">It doesn't seem to support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">the @font-face at-rule</a>, which lets us display the Playtime and Gentium fonts used in Katawa Shoujo. <a href="http://caniuse.com/#feat=fontface">Any browser released in the last 2 years or so should support it.</a></li> + <li id="csstransforms">It doesn't seem to support <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS transforms</a>, which means that we won't be able to scale the window or show most transitions. <a href="http://caniuse.com/#feat=transforms2d">Any browser released in the last 2 years ago should work.</a></li> + <li id="csstransitions">It doesn't seem to support <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS transitions</a>, which means that transitions won't work. Videos should still work though, unless stated above. <a href="http://caniuse.com/#feat=css-transitions">You should definitely try upgrading.</a></li> + <li id="html-svg-filter">It might not support SVG filters on HTML content, which means that filters like the sunset in the tea room will display as regular images. <a href="http://caniuse.com/#feat=svg-html">Unfortunately, this is only implemented in Firefox now.</a></li> + </ul> + <div id="gotit" class="button">I know it's broken, let me play!</div> + </div> <div id="container"> <div id="img"> <img id="bg" src="" alt=""> @@ -35,7 +44,7 @@ </div> <img id="window" src="/dump/ui/bg-say.png" alt="" style="display: none;"> <div id="say"></div> - <video id="video"></video> + <video id="vid"></video> </div> </body> </html> diff --git a/www/js/html5ks.js b/www/js/html5ks.js index 68cca48..cd3d6e3 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -181,10 +181,28 @@ window.html5ks = { }; } }, + show: function () { + var deferred = when.defer(); + deferred.resolve(); + return deferred.promise; + }, + hide: function () { + var deferred = when.defer(); + deferred.resolve(); + return deferred.promise; + }, + warnUnsupported: function () { + if (!(/Firefox/.test(navigator.userAgent))) { + document.getElementById("html-svg-filter").style.display = "block"; + } + document.getElementById("gotit").addEventListener("mouseup", function () { + document.getElementById("warn").style.display = "none"; + }, false); + }, onload: function () { this.elements = { container: document.getElementById("container"), - video: document.getElementById("video"), + video: document.getElementById("vid"), audio: { music: new Audio(), ambient: new Audio(), @@ -196,6 +214,8 @@ window.html5ks = { solid: document.getElementById("solid") } }; + this.elements.audio.music.loop = true; + this.elements.audio.ambient.loop = true; this.load(); this.scale(); window.addEventListener("resize", function () { @@ -205,17 +225,8 @@ window.html5ks = { this.elements.container.addEventListener("mouseup", function () { html5ks.next(); }, false); + this.warnUnsupported(); en_NOP1(); - }, - show: function () { - var deferred = when.defer(); - deferred.resolve(); - return deferred.promise; - }, - hide: function () { - var deferred = when.defer(); - deferred.resolve(); - return deferred.promise; } }; document.addEventListener("DOMContentLoaded", function () { diff --git a/www/js/jquery-2.0.2.min.js b/www/js/lib/jquery-2.0.2.min.js index 73e5218..73e5218 100644 --- a/www/js/jquery-2.0.2.min.js +++ b/www/js/lib/jquery-2.0.2.min.js diff --git a/www/js/modernizr.custom.71672.js b/www/js/lib/modernizr.custom.71672.js index cef48ac..cef48ac 100644 --- a/www/js/modernizr.custom.71672.js +++ b/www/js/lib/modernizr.custom.71672.js diff --git a/www/js/lib/when b/www/js/lib/when new file mode 120000 index 0000000..a9f8fe8 --- /dev/null +++ b/www/js/lib/when @@ -0,0 +1 @@ +../../../when
\ No newline at end of file diff --git a/www/when b/www/when deleted file mode 120000 index a8bce63..0000000 --- a/www/when +++ /dev/null @@ -1 +0,0 @@ -../when
\ No newline at end of file |