safari disclaimer
This commit is contained in:
parent
e0d2e52c93
commit
cb1a8a1705
3 changed files with 98 additions and 20 deletions
23
index.html
23
index.html
|
|
@ -146,6 +146,29 @@
|
||||||
|
|
||||||
|
|
||||||
<div id="keyboard" onclick="$('#text').focus()"></div>
|
<div id="keyboard" onclick="$('#text').focus()"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- safari disclaimer (centered vertically) -->
|
||||||
|
<div id="disclaimer" hidden style="
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
height: 46px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #333;
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
opacity: 0.8;
|
||||||
|
z-index: 1000;
|
||||||
|
">
|
||||||
|
<p style="margin: 0;">
|
||||||
|
<span style="font-weight: bold;">Safari</span> is not supported yet.
|
||||||
|
<br>
|
||||||
|
Please use <span style="font-weight: bold;">Chrome</span> or <span style="font-weight: bold;">Firefox</span>.
|
||||||
|
</p>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
37
script.js
37
script.js
|
|
@ -49,6 +49,23 @@ $(document).ready(() => {
|
||||||
// console.log(e.keyCode)
|
// console.log(e.keyCode)
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
let ua = navigator.userAgent.toLowerCase()
|
||||||
|
let safari = ua.indexOf('safari') != -1 && ua.indexOf('chrome') == -1
|
||||||
|
$('#disclaimer').toggle(safari)
|
||||||
|
|
||||||
|
// dev toggle override
|
||||||
|
// safari = !safari
|
||||||
|
|
||||||
|
$('html').css('--bg', safari ? '214, 216, 221' : '16, 16, 16')
|
||||||
|
$('html').css('--fg', safari ? '214, 216, 221' : '240, 240, 240')
|
||||||
|
$('html').css('--key', safari ? '255, 255, 255' : '48, 48, 48')
|
||||||
|
$('html').css('--key-height', safari ? '40px' : '48px')
|
||||||
|
$('html').css('--key-radius', safari ? '5px' : '8px')
|
||||||
|
$('html').css('--txt', safari ? '0, 0, 0' : '255, 255, 255')
|
||||||
|
$('html').css('--txt-size', safari ? '22px' : '26px')
|
||||||
|
$('html').css('--field', safari ? '255, 255, 255' : '0, 0, 0')
|
||||||
|
$('html').css('--gap', safari ? '6px' : '5px')
|
||||||
|
|
||||||
|
|
||||||
let url = '/tungs.txt'
|
let url = '/tungs.txt'
|
||||||
$.get(url, function (data) {
|
$.get(url, function (data) {
|
||||||
|
|
@ -357,26 +374,6 @@ var lastRender = 0
|
||||||
var time = 0
|
var time = 0
|
||||||
window.requestAnimationFrame(loop)
|
window.requestAnimationFrame(loop)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let ua = navigator.userAgent.toLowerCase()
|
|
||||||
let safari = ua.indexOf('safari') != -1 && !(ua.indexOf('chrome') > -1)
|
|
||||||
|
|
||||||
// dev toggle override
|
|
||||||
// safari = !safari
|
|
||||||
|
|
||||||
$('html').css('--bg', safari ? '214, 216, 221' : '16, 16, 16')
|
|
||||||
$('html').css('--fg', safari ? '214, 216, 221' : '240, 240, 240')
|
|
||||||
$('html').css('--key', safari ? '255, 255, 255' : '48, 48, 48')
|
|
||||||
$('html').css('--key-height', safari ? '40px' : '48px')
|
|
||||||
$('html').css('--key-radius', safari ? '5px' : '8px')
|
|
||||||
$('html').css('--txt', safari ? '0, 0, 0' : '255, 255, 255')
|
|
||||||
$('html').css('--txt-size', safari ? '22px' : '26px')
|
|
||||||
$('html').css('--field', safari ? '255, 255, 255' : '0, 0, 0')
|
|
||||||
$('html').css('--gap', safari ? '6px' : '5px')
|
|
||||||
|
|
||||||
window.addEventListener("beforeinstallprompt", (e) => {
|
window.addEventListener("beforeinstallprompt", (e) => {
|
||||||
console.log('beforeinstallprompt')
|
console.log('beforeinstallprompt')
|
||||||
// // Prevent Chrome 67 and earlier from automatically showing the prompt
|
// // Prevent Chrome 67 and earlier from automatically showing the prompt
|
||||||
|
|
|
||||||
58
test/index.html
Normal file
58
test/index.html
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="notranslate" translate="no">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||||
|
|
||||||
|
<title style="display: none;">test</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<textarea id="text" rows="10" style="width: 100%;" onclick="">test</textarea>
|
||||||
|
<div id="shelf"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
setInterval(() => {
|
||||||
|
let kbHeight = window.innerHeight - window.visualViewport.height
|
||||||
|
kbHeight -= 1
|
||||||
|
|
||||||
|
document.getElementById('shelf').style.bottom = kbHeight + 'px'
|
||||||
|
// document.getElementById('text').style.height = (window.visualViewport.height - kbHeight) + 'px'
|
||||||
|
}, 10)
|
||||||
|
|
||||||
|
// function selectText() {
|
||||||
|
// // flash the textarea to stop ios from scrolling
|
||||||
|
// let textarea = document.querySelector('textarea')
|
||||||
|
// textarea.style.display = 'none'
|
||||||
|
// setTimeout(() => {
|
||||||
|
// textarea.style.display = 'block'
|
||||||
|
// // select the text
|
||||||
|
// textarea.select()
|
||||||
|
// }, 10)
|
||||||
|
// }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #79394f;
|
||||||
|
color: #fff;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#shelf {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%; height: 10px;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: magenta;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Add table
Reference in a new issue