86 lines
2.6 KiB
HTML
86 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!--
|
|
/_ ... _ /_
|
|
/_//_/ ////_//_//_//\
|
|
_/ _//
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<title>WORDs</title>
|
|
<meta name="apple-mobile-web-app-title" content="WORDs">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimal-ui">
|
|
<link rel="stylesheet" href="https://unpkg.com/chota@0.8.0">
|
|
<!-- dev mode -->
|
|
<!-- <link rel="stylesheet" href="_media/css/chota.min.css"> -->
|
|
<link rel="stylesheet" href="_media/css/styles.css">
|
|
<link rel="icon" type="image/png" href="_media/img/favicon.png">
|
|
<link rel="apple-touch-icon" href="_media/img/apple-touch-icon.png">
|
|
<link rel="apple-touch-startup-image" href="_media/img/apple-launch-icon.png">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<nav class="nav">
|
|
<div class="nav-left">
|
|
<a class="brand" href="#">WORDs</a>
|
|
</div>
|
|
<div class="nav-center">
|
|
<p id="lives" class="button error">loading...</p>
|
|
</div>
|
|
<div class="nav-right">
|
|
<!-- <a class="button dropdown">Language</a> -->
|
|
<a class="button clear" id="theme-switch" onclick="switchMode(this)">☀️</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<nav class="tabs is-full">
|
|
<a onclick="document.location.reload(true);" class="active" id="gameButton">Game</a>
|
|
<a onclick="showPage(this, pageStatistics);" id="statsButton">Statistics</a>
|
|
<a onclick="showPage(this, pageCredits);" id="creditsButton">Credits</a>
|
|
</nav>
|
|
|
|
<br>
|
|
|
|
<section id="content">
|
|
<p id="word" class="card text-center text-uppercase">
|
|
Loading word...
|
|
</p>
|
|
|
|
<div id="keyboard" class="is-hidden text-center">
|
|
... keyboard ...
|
|
</div>
|
|
</section>
|
|
|
|
<hr>
|
|
<footer class="text-center">
|
|
<p class="text-grey is-marginless is-small">
|
|
by iiiypuk<br>
|
|
ver: 2.0.0
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
if (window.matchMedia &&
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.body.classList.add('dark');
|
|
document.querySelector("#theme-switch").innerHTML = "🌙";
|
|
}
|
|
|
|
function switchMode(el) {
|
|
const bodyClass = document.body.classList;
|
|
bodyClass.contains("dark")
|
|
? ((el.innerHTML = "☀️"), bodyClass.remove("dark"))
|
|
: ((el.innerHTML = "🌙"), bodyClass.add("dark"));
|
|
}
|
|
|
|
</script>
|
|
<script type="text/javascript" src="_media/js/game.js"></script>
|
|
</body>
|
|
</html>
|