133 lines
5.2 KiB
HTML
133 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Forum</title>
|
|
<meta
|
|
name="viewport"
|
|
content="viewport-fit=auto, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
/>
|
|
<meta name="format-detection" content="telephone=no" />
|
|
<meta name="msapplication-tap-highlight" content="no" />
|
|
<link rel="manifest" href="./manifest.json" />
|
|
<link rel="stylesheet" href="" />
|
|
<script>window.config = { UI: 'https://frm.so', SERVER: 'https://frm.so' }</script>
|
|
<script type="module">
|
|
await import('./mobileutil.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(`${window.config.UI}/_/code/shared.css`, { replaceExisting: true });
|
|
await appendScript(window.config.UI + '/_/code/quill.js')
|
|
await appendScript(window.config.UI + '/83947261/index.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>
|
|
<meta name="theme-color" content="#31d53d" />
|
|
</head>
|
|
<body>
|
|
</body>
|
|
</html> |