shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add phone_test.html for input testing

Browse Source 
Signed-off-by: Robin Davies <rerdavies@gmail.com>
This commit is contained in:
Robin Davies
2025-09-05 15:34:10 -04:00
committed by GitHub
parent 3f6e4e2834
commit 21feb82f8f
1 changed files with 77 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/phone_test.html
+77
View File
@@ -0,0 +1,77 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-visual" />
<meta name="color-scheme" content="dark light" /> <!-- uses media queries in web views. -->
<meta name="description" content="PiPedal Guitar Stomp Box for Raspberry Pi" />
<style>
BODY {
margin: 0;
padding: 0;
font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background-color: #000;
color: #E8E8E8;
}
</style>
<style>
* {
box-sizing: border-box;
}
.grid-cell {
display: flex;
padding: 8px;
flex-flow: row nowrap;
align-items: center;
justify-content: left;
}
.text-input {
text-align: center;
width: 120px;
font-size: 16px;
padding: 4px;
}
</style>
<script>
</script>
<title>Input Test</title>
</head>
<body>
<div style="padding: 24px 16px">
<h1>Input Test</h1>
<div style="display: flex; flex-flow: column nowrap; align-items: center; justify-content: start; margin: 8px;
align-items: start">
<div style="display: grid;
grid-template-columns: auto auto;
grid-template-rows: repeat(3, auto); margin: 8px;
justify-content: start; align-items: start;
background-color: #222;
padding: 8px 16px;
">
<div class="grid-cell">type=number</div>
<div class="grid-cell"><input type="number" class="text-input" min="-10" max="10" /></div>
<div class="grid-cell">inputmode="numeric"</div>
<div class="grid-cell"><input inputmode="numeric" class="text-input" min="-10" max="10" /></div>
<div class="grid-cell">Both</div>
<div class="grid-cell"><input type="number" inputmode="numeric" class="text-input" min="-100" max="100" /></div>
<div class="grid-cell">Telephone</div>
<div class="grid-cell"><input type="tel" class="text-input" min="-10" max="10" /></div>
</div>
</div>
</div>
</body>
</html>