161 lines
5.8 KiB
HTML
161 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Parchment</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="cave/_/icons/logo.png">
|
|
<link href="http://localhost:10002/_/code/gridjs/min.css" rel="stylesheet"/>
|
|
<script src="http://localhost:10002/_/code/gridjs/min.js"></script>
|
|
<link href="http://localhost:10002/_/code/gridstack/min.css" rel="stylesheet"/>
|
|
<script src="http://localhost:10002/_/code/gridstack/min.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background-color: #6A2C1C;
|
|
}
|
|
|
|
.draggable {
|
|
-webkit-app-region: drag;
|
|
height: 40px;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
z-index: 999;
|
|
}
|
|
|
|
:root {
|
|
--main: #6A2C1C;
|
|
--accent: #FEB279;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background: var(--main);
|
|
}
|
|
</style>
|
|
<script>window.config = { UI: 'http://localhost:10002', SERVER: 'https://frm.so' }</script>
|
|
<script type="module">
|
|
await import('./desktoputil.js')
|
|
|
|
function appendScript(src, isModule = false) {
|
|
return new Promise((resolve, reject) => {
|
|
const s = document.createElement('script')
|
|
s.src = src
|
|
s.crossOrigin = "anonymous"
|
|
if (isModule) s.type = 'module'
|
|
s.onload = resolve
|
|
s.onerror = reject
|
|
document.head.appendChild(s)
|
|
})
|
|
}
|
|
|
|
function appendStylesheet(href, { replaceExisting = false } = {}) {
|
|
return new Promise((resolve, reject) => {
|
|
if (replaceExisting) {
|
|
document.querySelector('link[rel="stylesheet"]')?.remove();
|
|
}
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = href;
|
|
link.onload = resolve;
|
|
link.onerror = reject;
|
|
document.head.appendChild(link);
|
|
});
|
|
}
|
|
|
|
try {
|
|
await appendStylesheet(`${config.UI}/_/code/shared.css`, { replaceExisting: true });
|
|
await appendScript(window.config.UI + '/_/code/quill.js')
|
|
await appendScript(window.config.UI + '/47382915/app.js', true)
|
|
} catch (e) {
|
|
document.body.innerHTML = `
|
|
<style>
|
|
#ptr-screen {
|
|
position: fixed; inset: 0;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
font-family: sans-serif; text-align: center;
|
|
padding: 2rem; touch-action: none;
|
|
transition: transform 0.2s ease;
|
|
color: var(--text);
|
|
}
|
|
#ptr-icon {
|
|
font-size: 2rem; margin-bottom: 1rem;
|
|
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
opacity: 0.4;
|
|
}
|
|
#ptr-label {
|
|
font-size: 0.9rem; opacity: 0.5;
|
|
margin-top: 0.5rem;
|
|
}
|
|
#ptr-indicator {
|
|
color: var(--text);
|
|
position: fixed; top: 5vh; left: 0; right: 0;
|
|
display: flex; align-items: center; justify-content: center;
|
|
padding-top: env(safe-area-inset-top);
|
|
height: 0; overflow: hidden;
|
|
transition: height 0.1s ease;
|
|
font-size: 0.8rem; opacity: 0.6; gap: 0.4rem;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg) } }
|
|
.spinning { animation: spin 0.6s linear infinite }
|
|
</style>
|
|
<div id="ptr-indicator">
|
|
<span id="ptr-arrow">↓</span>
|
|
<span id="ptr-hint">Pull to retry</span>
|
|
</div>
|
|
<div id="ptr-screen">
|
|
<div id="ptr-icon">⚠️</div>
|
|
<p style="margin:0;font-size:1.1rem;font-weight:600">No connection</p>
|
|
<p id="ptr-label">Could not reach the server.<br>Pull down to try again.</p>
|
|
</div>
|
|
`
|
|
|
|
const THRESHOLD = 90
|
|
let startY = 0, dragging = false
|
|
|
|
document.addEventListener('touchstart', e => {
|
|
startY = e.touches[0].clientY
|
|
dragging = true
|
|
})
|
|
|
|
document.addEventListener('touchmove', e => {
|
|
if (!dragging) return
|
|
const dy = Math.max(0, e.touches[0].clientY - startY)
|
|
const pull = Math.min(dy, THRESHOLD * 1.5)
|
|
const progress = Math.min(pull / THRESHOLD, 1)
|
|
|
|
document.getElementById('ptr-screen').style.transform = `translateY(${pull * 0.4}px)`
|
|
document.getElementById('ptr-indicator').style.height = (pull * 0.6) + 'px'
|
|
document.getElementById('ptr-arrow').style.transform = `rotate(${progress * 180}deg)`
|
|
document.getElementById('ptr-hint').textContent = progress >= 1 ? 'Release to retry' : 'Pull to retry'
|
|
document.getElementById('ptr-icon').style.opacity = 0.4 + progress * 0.6
|
|
})
|
|
|
|
document.addEventListener('touchend', e => {
|
|
if (!dragging) return
|
|
dragging = false
|
|
const dy = e.changedTouches[0].clientY - startY
|
|
if (dy >= THRESHOLD) {
|
|
document.getElementById('ptr-arrow').textContent = '↻'
|
|
document.getElementById('ptr-arrow').classList.add('spinning')
|
|
document.getElementById('ptr-hint').textContent = 'Retrying…'
|
|
setTimeout(() => location.reload(), 400)
|
|
} else {
|
|
document.getElementById('ptr-screen').style.transform = ''
|
|
document.getElementById('ptr-indicator').style.height = '0'
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="draggable"></div>
|
|
</body>
|
|
</html>
|