fern/sensor-watch
1
0
Fork 0
mirror of https://github.com/firewalkwithm3/Sensor-Watch.git synced 2024-11-22 19:20:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve simulator page design

Browse source
This commit is contained in:
Hugo Chargois 2023-11-18 00:28:54 +01:00
parent baadb0b43f
commit 2e9ea8c36f
1 changed files with 40 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
watch-library/simulator/shell.html
View file

@ -37,12 +37,13 @@
.highlight { fill: #fff !important; } .highlight { fill: #fff !important; }
#skinselect label { #skinselect label {
display: inline-block; display: inline-block;
padding: 8px; padding: 4px;
background-color: black; background-color: black;
color: white; color: white;
border-radius: 8px; border-radius: 8px;
border: 2px solid #0e57a9; border: 2px solid #0e57a9;
outline: 4px solid black; outline: 4px solid black;
margin: 4px;
cursor: pointer; cursor: pointer;
} }
#skinselect #a158wea-label { #skinselect #a158wea-label {
@ -50,13 +51,16 @@
color: black; color: black;
border-color: black; border-color: black;
outline-color: #b68855ff; outline-color: #b68855ff;
}
h2 {
margin: 8px 0;
font-size: 1em;
} }
</style> </style>
</head> </head>
<body> <body>
<div style="max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center;"> <div style="max-width: 800px; min-width: 400px; margin: 0 auto; padding: 0 1em; display: flex; flex-direction: column; align-items: center;">
<h1 style="text-align: center;">Sensor Watch Emulator</h1> <h1 style="text-align: center;">Sensor Watch Emulator</h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1271 1311" width="320"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1271 1311" width="320">
<defs> <defs>
@ -882,30 +886,40 @@
</g> </g>
</g> </g>
</svg> </svg>
<table cellpadding="5">
<tr>
<td id="skinselect">
<input type="radio" id="f91w" name="skin" value="f91w" onclick="setSkin(this.value)" checked><label for="f91w">F-91W</label>
<input type="radio" name="skin" id="a158wea9" value="a158wea9" onclick="setSkin(this.value)"><label id="a158wea-label" for="a158wea9">A158WEA-9</label>
</td>
<td>
<a href="https://github.com/alexisphilip/Casio-F-91W">Original F-91W SVG</a> is &copy; 2020 Alexis Philip,<br>used here under the terms of the MIT license.
</td>
<td>
<label>Volume
<input id="volume" name="volume" type="range" min="0" max="100" step="1" oninput="setVolume(this.value)"/>
</label>
</td>
</tr>
</table>
</div>
<button onclick="getLocation()">Set location register (will prompt for access)</button> <div style="display: grid; grid-template-columns: 80px 1fr; align-items: center; margin: 8px 0">
<br> <h2>Skin</h2>
<input id="input" style="width: 500px"></input> <div id="skinselect">
<button id="submit" onclick="sendText()">Send</button> <input type="radio" name="skin" id="f91w" value="f91w" onclick="setSkin(this.value)" checked><label
<br> for="f91w">F-91W</label>
<textarea id="output" rows="8" style="width: 100%"></textarea> <input type="radio" name="skin" id="a158wea9" value="a158wea9" onclick="setSkin(this.value)"><label
id="a158wea-label" for="a158wea9">A158WEA-9</label>
</div>
<h2>Volume</h2>
<div>
<input id="volume" name="volume" type="range" min="0" max="100" step="1" oninput="setVolume(this.value)" />
</div>
<h2>Location</h2>
<div>
<button onclick="getLocation()">Set register (will prompt for access)</button>
</div>
</div>
<div style="display: flex; flex-direction: column; width: 100%">
<textarea id="output" rows="8" style="width: 100%"></textarea>
<div style="display: flex">
<input id="input" placeholder="Filesystem command (see filesystem.c)" style="flex-grow: 1"></input>
<button id="submit" onclick="sendText()">Send</button>
</div>
</div>
<p>
<a href="https://github.com/alexisphilip/Casio-F-91W">Original F-91W SVG</a> is &copy; 2020 Alexis Philip, used here
under the terms of the MIT license.
</p>
</div>
<script type='text/javascript'> <script type='text/javascript'>
var outputElement = document.getElementById('output'); var outputElement = document.getElementById('output');