mirror of
https://github.com/keymanapp/keyman.git
synced 2026-08-28 19:27:44 +00:00
86112cabf0
Not worth splitting all this polish into separate commits, I think... 1. Add frames for other device types 2. Reorganise menus including burger menu 3. Highlight button after upload to show where file is accessible 4. Fix cropped device frame images, scrolling 5. Improve device menu 6. Add Keyman Developer logo and watermark 7. Add status box with current keyboard, model and device 8. Cleanup z-indexing 9. Add About dialog 10. Add Help links 11. Report version in About dialog, title on logo hover 12. Ensure keyboard reloads after change 13. Support loading models over https
187 lines
8.4 KiB
HTML
187 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
|
|
<!-- Set the viewport width to match iOS device widths -->
|
|
<meta name="viewport" content="width=device-width,user-scalable=no" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
|
<title>Keyman Developer Keyboard Test Site</title>
|
|
|
|
<script src="lib/sentry/bundle.min.js"></script>
|
|
<script src="lib/sentry/init.js"></script>
|
|
<script src="lib/websockhop/websockhop.min.js"></script>
|
|
<script src="resource/keymanweb.js"></script>
|
|
|
|
<link rel="icon" href="favicon.ico" />
|
|
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="lib/bootstrap/css/bootstrap-icons.css" rel="stylesheet" />
|
|
<link href='test.css' type="text/css" rel="stylesheet" />
|
|
<link href="inc/keyboards.css" type="text/css" rel="stylesheet" /> <!-- This script loads the dynamic keyboard fonts -->
|
|
</head>
|
|
|
|
<body class='osk-always-visible'>
|
|
|
|
<header class='navbar navbar-dark bg-dark text-white'>
|
|
<div class='container-fluid'>
|
|
<div class='xzrow'>
|
|
<div class='d-inline-flex my-1 mx-1'>
|
|
<div class="dropdown" id="dropdown-menu">
|
|
<button id="btn-menu" class="btn btn-sm bg-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<svg focusable="false" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg>
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="btn-menu">
|
|
<!-- filled by packages.js -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='d-inline-flex my-1 mx-1'>
|
|
<div class="dropdown" id="dropdown-keyboard">
|
|
<button id="btn-keyboard" class="btn btn-sm bg-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Keyboard
|
|
<span class="bi-caret-down-fill"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="btn-keyboard">
|
|
<!-- filled by test.js -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='d-inline-flex my-1 mx-1'>
|
|
<div class="dropdown" id="dropdown-model">
|
|
<button id="btn-model" class="btn btn-sm bg-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Model
|
|
<span class="bi-caret-down-fill"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="btn-model">
|
|
<li><button class="dropdown-item" type="button" data-model=''>(no model)</button></li>
|
|
<!-- filled by test.js -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='d-inline-flex my-1 mx-1'>
|
|
<div class="dropdown" id="dropdown-device">
|
|
<button id="btn-device" class="btn btn-sm bg-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Device
|
|
<span class="bi-caret-down-fill"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="btn-device">
|
|
<li><h4 class="dropdown-header">Desktop Browsers</h4></li>
|
|
<li><button class="dropdown-item" type="button" data-device='Windows'>Windows</button></li>
|
|
<li><button class="dropdown-item" type="button" data-device='macOS'>macOS</button></li>
|
|
<li><button class="dropdown-item" type="button" data-device='Linux'>Linux</button></li>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li><h4 class="dropdown-header">Phone Devices</h4></li>
|
|
<li><button class="dropdown-item" type="button" data-device='iPhone'>iPhone 5S</button></li>
|
|
<li><button class="dropdown-item" type="button" data-device='Pixel5'>Pixel 5</button></li>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li><h4 class="dropdown-header">Tablet Devices</h4></li>
|
|
<li><button class="dropdown-item" type="button" data-device='iPadMini'>iPad Mini</button></li>
|
|
<li><button class="dropdown-item" type="button" data-device='Nexus9'>Nexus 9</button></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='d-inline-flex my-1 mx-1'>
|
|
<form class="file-upload" id="drop-form">
|
|
<input type="file" id="drop-file" multiple accept="*" onchange="handleFiles(this.files)">
|
|
<input type="button" id="drop-button" class="btn btn-sm bg-light" value="Upload file">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='d-inline-flex my-1 mx-1 float-end'>
|
|
<img src='keyman-developer.svg' id='keyman-developer-logo' alt='Keyman Developer Server'>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class='container-fluid' id='drop-area'>
|
|
<div class='row mb-2 mt-2'>
|
|
<div class='col'>
|
|
<div id='status' class='card rounded-3 container'>
|
|
<div class='row'>
|
|
<div title='Active Keyboard' class='col-md-4 col-12'>
|
|
<span>⌨</span> <span id='status-keyboard'></span>
|
|
</div>
|
|
<div title='Active Lexical Model' class='col-md-4 col-12'>
|
|
<span>📖</span> <span id='status-model'></span>
|
|
</div>
|
|
<div title='Active Device' id='status-device-box' class='col-md-4 col-12 d-none d-md-block'>
|
|
<span>📱</span> <span id='status-device'>iPhone</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row'>
|
|
<div class='col'>
|
|
<div id='content'>
|
|
<div id='character-grid' class='rounded-3'>
|
|
<!-- contains the breakdown of characters from the input-area -->
|
|
</div>
|
|
<div id='input-area'><textarea id='ta1' class='test'></textarea></div>
|
|
<div id='osk-host-frame'>
|
|
<div id='osk-host'>
|
|
<!-- Contains the inline OSK -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id='drop-image'></div>
|
|
|
|
<div class="position-absolute top-0 end-0 p-3 toast-container" id='toast-container'>
|
|
<div id='toast-info-template' data-bs-dismiss="toast" class="toast text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body"></div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div id='toast-success-template' data-bs-dismiss="toast" class="toast text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body"></div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div id='toast-error-template' data-bs-dismiss="toast" class="toast text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body"></div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class='modal' id='about-modal' tabindex='-1'>
|
|
<div class='modal-dialog'>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">About Keyman Developer Server</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Version <span id='about-version'></span></p>
|
|
<p>© 2022 SIL International</p>
|
|
<p><a id='about-help-link' target='_blank'>Help</a></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src='test.js'></script>
|
|
<script src='packages.js'></script>
|
|
<script src='websocket.js'></script>
|
|
<script src='upload.js'></script>
|
|
<script src='chargrid.js'></script>
|
|
</body>
|
|
</html>
|