pages/teletext/index.html
2025-04-13 11:40:07 -04:00

56 lines
3.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>MilkNet | Teletext by zxnet.co.uk</title>
<link id="favicon" rel="icon" href="https://forge.fsky.io/repo-avatars/c2504c43714bef6be3cc3500215091f832529292c1bc7338ad9d1b8262dbf84c" type="image/x-icon">
<style type="text/css">
body { background: #000; color:#000; font-family:sans-serif; margin:0px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#viewer { height:100vh; height:calc(var(--vh, 1vh)*100); width:100vw; display:flex; flex-direction: column; }
H1 { margin: 0em; font-size:1.5em; }
a, span { color:#000; text-decoration: none; }
#header { margin-bottom:5px; color:#000; background:#000; padding:0.25em 0.5em; width:100%; display:flex; align-items: center; justify-content:space-between;}
#bitmaps { display:none; }
#screen { padding:5px; text-align:center; height:100%; flex:1}
#container { flex:1; background:#000; display:inline-flex; width:100vw; height:100%; overflow:hidden }
#right { display:none; max-width:30vw; max-height:100%; height:45em; width: 15em;}
#below { display:none; height:calc(100vw*0.464);}
#remote { padding:5px; height:100%; width:100%; display:none;}
#remote2 { width:100vw; display:none; height:calc(100vw*0.464);}
#teletextCanvas {position:relative; max-width:100%; max-height:100%; }
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
</style>
<meta property="og:image" content="preview.png"/>
<meta name="description" content="Web based teletext emulator with different services on each channel. Includes Teefax, Ceefax, and Chunkytext."/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="viewer.js"></script>
<script type="text/javascript" src="settings.js"></script>
<script type="text/javascript" src="tv.js"></script>
<script type="text/javascript" src="remote.js"></script>
<script type="text/javascript" src="teletext-resources/renderer.js"></script>
<script type="text/javascript" src="teletext-resources/teletext.js"></script>
<script type="text/javascript" src="/index.js"></script>
</head>
<body>
<div id="viewer">
<div id="header">
<H1>Teletext viewer</H1>
<span style="color:#fff; padding:0em 1em">Use remote to select channel and press <span style="color:white;">(≡)</span> for teletext.</span>
</div>
<div id="container">
<div id="screen">
<canvas id="teletextCanvas" width="1024" height="576"></canvas>
</div>
<div id="right">
<object id="remote" data="remote.svg" type="image/svg+xml"></object>
</div>
</div>
<div id="below">
<object id="remote2" data="remote2.svg" type="image/svg+xml"></object>
</div>
<div id="bitmaps">
<img src="teletext-resources/static.png" id="static">
<img src="start.png" id="start">
</div>
</div>
</body>
</html>