kinda nice

This commit is contained in:
Ricardo (XenGi) Band 2022-01-07 21:35:20 +01:00
commit 336eee12bf
No known key found for this signature in database
GPG key ID: 1A9D657D06B5820E
6 changed files with 224 additions and 3 deletions

1
.gitignore vendored
View file

@ -1 +1,2 @@
public/
node_modules/

View file

@ -7,11 +7,10 @@ workflow:
before_script:
- cat /etc/os-release
- yarn --version
- yarn add bulma
- yarn list
pages:
script:
- make deps
- make build
artifacts:
paths:

View file

@ -1,6 +1,8 @@
build: clean
mkdir -p public/{css,js,img}
cp node_modules/bulma/css/bulma.min.css public/css/
cp node_modules/@fortawesome/fontawesome-free/css/all.min.css public/css/fontawesome.min.css
cp -r node_modules/@fortawesome/fontawesome-free/webfonts public/
cp -r css public/
cp -r js public/
cp -r img public/
@ -10,7 +12,7 @@ clean:
rm -rf public
deps:
yarn add bulma
yarn
serve:
cd public ; python -m http.server

View file

@ -6,10 +6,210 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>mkbd65 - by XenGi</title>
<link rel="stylesheet" href="css/bulma.min.css" />
<link rel="stylesheet" href="css/fontawesome.min.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<nav class="navbar">
<div class="container">
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">
Home
</a><!--/.navbar-item-->
<a class="navbar-item" href="#features">
Features
</a><!--/.navbar-item-->
<a class="navbar-item" href="#layout">
Layout
</a><!--/.navbar-item-->
<a class="navbar-item" href="#hardware">
Hardware
</a><!--/.navbar-item-->
<a class="navbar-item" href="#case">
Case
</a><!--/.navbar-item-->
<a class="navbar-item" href="#compat">
Compatibility
</a><!--/.navbar-item-->
</div><!--/.navbar-start-->
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-dark">
<span class="icon">
<i class="fab fa-gitlab"></i>
</span><!--/.icon-->
<span>Gitlab</span>
</a><!--/.button .is-dark-->
</div><!--/.buttons-->
</div><!--/.navbar-item-->
</div><!--/.navbar-end-->
</div><!--/.navbar-menu-->
</div><!--/.container-->
</nav><!--/.navbar-->
<section class="hero is-dark is-halfheight">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
mkbd65
</p><!--/.title-->
<p class="subtitle">
Mobile 65% keyboard addon for modern smartphones
</p><!--/.subtitle-->
</div><!--/.container .has-text-centered-->
</div><!--/.hero-body-->
</section><!--/.hero .is-dark .is-halfheight-->
<section id="features" class="section">
<div class="container">
<h1 class="title">Features</h1>
<div class="content">
<ul>
<li>Full qwerty keyboard layout (us-altgr-intl)</li>
<li>Fully customizable</li>
<li>Uses USB-C</li>
<li>Open source firmware</li>
<li>Open hardware</li>
</ul>
</div><!--/.content-->
</div><!--/.container-->
</section><!--/.section-->
<section class="section">
<div class="container">
<h1 class="title">Planned features</h1>
<div class="content">
<ul>
<li>
Integrated USB 3 Hub
<ul>
<li>Additional USB-C port</li>
<li>USB-PD passthrough</li>
</ul>
</li>
<li>Headphone jack</li>
<li>Key Frontlight</li>
</ul>
</div><!--/.content-->
</div><!--/.container-->
</section><!--/.section-->
<section id="layout" class="section">
<div class="container">
<h1 class="title">Layout</h1>
<div class="highlight"><pre><code>0: no mod
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ ESC║ 1 ║ 2 ║ 3 ║ 4 ║ 5 ║ 6 ║ 7 ║ 8 ║ 9 ║ 0 ║BACKSPACE║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ q ║ w ║ e ║ r ║ t ║ y ║ u ║ i ║ o ║ p ║ [ ║ ] ║ \ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ a ║ s ║ d ║ f ║ g ║ h ║ j ║ k ║ l ║ ; ║ ' ║ RETURN ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬═════════╣
║ z ║ x ║ c ║ v ║ b ║ n ║ m ║ , ║ . ║ / ║ ▲ ║ SHIFT ║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║CTRL║ FN ║SHFT║ALTG║ SPACE ║ - ║ = ║ ◀ ║ ▼ ║ ▶ ║CTRL║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</code></pre>
</div><!--/.highlight-->
<div class="highlight"><pre><code>1: mod shift (default keyboard behaviour)
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ ESC║ ! ║ @ ║ # ║ $ ║ % ║ ^ ║ &amp; ║ * ║ ( ║ ) ║BACKSPACE║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ Q ║ W ║ E ║ R ║ T ║ Y ║ U ║ I ║ O ║ P ║ { ║ } ║ | ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ A ║ S ║ D ║ F ║ G ║ H ║ J ║ K ║ L ║ : ║ " ║ RETURN ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬═════════╣
║ Z ║ X ║ C ║ V ║ B ║ N ║ M ║ < ║ > ║ ? ║ ▲ ║░░░░░░░░░║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║CTRL║ FN ║░░░░║ALTG║ SPACE ║ _ ║ + ║ ◀ ║ ▼ ║ ▶ ║CTRL║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</code></pre>
</div><!--/.highlight-->
<div class="highlight"><pre><code>2: mod altgr (default keyboard behaviour)
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ ║ ¹ ║ ² ║ ³ ║ ¤ ║ € ║ ^ ║ ̛ ║ ˛ ║ ‘ ║ ’ ║BACKSPACE║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ ä ║ å ║ é ║ ë ║ þ ║ ü ║ ú ║ í ║ ó ║ ö ║ « ║ » ║ ¬ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ á ║ ß ║ ð ║ ║ ║ ║ ï ║ œ ║ ø ║ ¶ ║ ´ ║ RETURN ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬═════════╣
║ æ ║ œ ║ © ║ ® ║ ║ ñ ║ µ ║ ç ║ ˙ ║ ¿ ║ ▲ ║ SHIFT ║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║CTRL║ FN ║SHFT║░░░░║ SPACE ║ ¥ ║ × ║ ◀ ║ ▼ ║ ▶ ║CTRL║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</code></pre>
</div><!--/.highlight-->
<div class="highlight"><pre><code>3: mod fn (adds missing keys)
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ Esc║ F1 ║ F2 ║ F3 ║ F4 ║ F5 ║ F6 ║ F7 ║ F8 ║ F9 ║ F10║ DELETE ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ F11║ F12║ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ` ║ Super ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬═════════╣
║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║PgUp║ SHIFT ║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║SUPR║░░░░║SHFT║ALTG║ Tab ║ ║ ║Pos1║PgDn║ End║CTRL║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</code></pre>
</div><!--/.highlight-->
</div><!--/.container-->
</section><!--/.section-->
<section id="layout" class="section">
<div class="container">
<h1 class="title">Tips</h1>
<div class="content">
<ul>
<li>Hold left thumb on <span class="tag">Ctrl</span> and <span class="tag">Fn</span> to press <span class="tag">Super</span></li>
<li>Get <span class="tag">`</span> key by pressing <span class="tag">Fn</span> with left thumb and <span class="tag">'</span> with right thumb</li>
<li>Get <span class="tag">~</span> key by pressing <span class="tag">Fn</span>+<span class="tag">Shift</span> with left thumb and <span class="tag">'</span> with right thumb</li>
<li>Since Android doesn't really use the <span class="tag">Alt</span> key, the <span class="tag">Alt</span> key n this keyboar is actually an <span class="tag">AltGr</span> key to give you the <span class="tag">€</span> and umlauts</li>
<li>
Sorry france :(
<ul>
<li>Pressing <span class="tag">AltGr</span>+<span class="tag">Fn</span>+<span class="tag">'</span> is the only way to get <span class="tag">`</span> and combine it with the next char</li>
<li>Pressing <span class="tag">AltGr</span>+<span class="tag">Shift</span>+<span class="tag">Fn</span>+<span class="tag">'</span> is the only way to get <span class="tag">~</span> and combine it with the next char</li>
</ul>
</li>
</ul>
</div><!--/.content-->
</div><!--/.container-->
</section><!--/.section-->
<section id="hardware" class="section">
<p>
<a href="https://pid.codes/1209/4803/">USB PID</a>
</p>
</section><!--/.section-->
<section id="case" class="section">
</section><!--/.section-->
<section id="compat" class="section">
<div class="container">
<h1 class="title">Compatible phones</h1>
<div class="content">
<ul>
<li>Oneplus 8T (planned)</li>
</ul>
</div><!--/.content-->
</div><!--/.container-->
</section><!--/.section-->
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>mkbd65</strong> by <a href="https://xengi.de">XenGi</a> is licensed under <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
</div><!--/.content .has-text-centered-->
</footer><!--/.footer-->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

6
package.json Normal file
View file

@ -0,0 +1,6 @@
{
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.4",
"bulma": "^0.9.3"
}
}

13
yarn.lock Normal file
View file

@ -0,0 +1,13 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
"@fortawesome/fontawesome-free@^5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz#ecda5712b61ac852c760d8b3c79c96adca5554e5"
integrity sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==
bulma@^0.9.3:
version "0.9.3"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==