dofdev/tungtap
dofdev/tungtap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

safari disclaimer

Browse source
This commit is contained in:
ethan merchant 2023-05-01 08:09:10 -04:00
parent e0d2e52c93
commit cb1a8a1705
3 changed files with 98 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
index.html
View file

@ -147,6 +147,29 @@
<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>
</html>

37
script.js
View file

@ -49,6 +49,23 @@ $(document).ready(() => {
// 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'
$.get(url, function (data) {
@ -357,26 +374,6 @@ var lastRender = 0
var time = 0
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) => {
console.log('beforeinstallprompt')
// // Prevent Chrome 67 and earlier from automatically showing the prompt

58
test/index.html Normal file
View 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>