make page

This commit is contained in:
Alexander Popov 2021-02-25 00:06:14 +03:00
parent 47797bd9fe
commit 9de86b6c4d
8 changed files with 84 additions and 19 deletions

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/
package-lock.json

1
_media/css/chota.min.css vendored Symbolic link
View File

@ -0,0 +1 @@
../../node_modules/chota/dist/chota.min.css

22
_media/css/styles.css Normal file
View File

@ -0,0 +1,22 @@
@font-face {
font-family: 'F5.6';
src: url('/_media/fonts/F5.6-Regular.eot');
src: url('/_media/fonts/F5.6-Regular.eot?#iefix') format('embedded-opentype'),
url('/_media/fonts/F5.6-Regular.woff2') format('woff2'),
url('/_media/fonts/F5.6-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body.dark {
--bg-color: #000;
--bg-secondary-color: #131316;
--font-color: #f5f5f5;
--color-grey: #ccc;
--color-darkGrey: #777;
}
body {
font-family: 'F5.6';
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,37 +1,72 @@
<!DOCTYPE html>
<html>
<html lang="en">
<!--
/_ ... _ /_
/_//_/ ////_//_//_//\
_/ _//
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>hgman</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="utf-8">
<title>Hangman</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
</head>
<body>
<div class="container">
<header>
<nav class="nav">
<div class="nav-left">
<a class="brand" href="#">Hangman game</a>
</div>
<div class="nav-right">
<a class="button dark" id="theme-switch" onclick="switchMode(this)">☀️</a>
</div>
</nav>
</header>
<div class="wrap">
<div id="WORD" class="word">
LOADING
</div>
<nav class="tabs is-full">
<a class="active">Game</a>
<a>Statistics</a>
<a>Credits</a>
</nav>
<div id="lives" class="lives">
...
</div>
<br>
<div id="keyboard" class="keyboard">
...
</div>
<section>
<p id="word" class="card text-center text-uppercase">
Loading word...
</p>
<footer>
2021 by <a href="//iiiypuk.me/">iiiypuk</a>
<p>ver: 0.2.1</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 type="text/javascript" src="game.js"></script>
<script>
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
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>

5
package.json Normal file
View File

@ -0,0 +1,5 @@
{
"dependencies": {
"chota": "0.8.0"
}
}