<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Teleprompter Remote</title>
<!-- Mobile Specific Meta Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Remote">
<meta name="application-name" content="Remote">
<meta name="robots" content="noindex,nofollow">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/remote.v120.css">
<link rel="preload" href="assets/font/fontawesome-webfont.woff?v=3.2.1" as="font" type="font/woff2" crossorigin>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="192x192" href="assets/img/apple/icon-192x192.png" />
</head>
<body>
<div id="remote-setup" class="remote-wrapper">
<div>
<p><input type="text" class="remote-id" name="remote-id" maxlength="6" placeholder="ABC123" onfocus="this.placeholder=''" onblur="this.placeholder='ABC123'" required /></p>
<p>Enter Remote ID to Connect</p>
</div>
<div class="footer text-center">
TELEPROMPTER
</div>
</div>
<div id="remote-control" class="remote-wrapper">
<div class="header">
<button class="button small icon-eye-close dim-controls" id="button-dim" aria-label="Dim While Reading" title="Dim While Reading"></button>
<button class="button small icon-undo reset" id="button-reset" aria-label="Reset TelePrompter" title="Reset TelePrompter"></button>
<button class="button small icon-text-width flip-x" id="button-flip-x" aria-label="Flip Text Horizontally" title="Flip Text Horizontally"></button>
<button class="button small icon-text-height flip-y" id="button-flip-y" aria-label="Flip Text Vertically" title="Flip Text Vertically"></button>
<button class="button small icon-off power" id="button-power" aria-label="Disconnect Remote" title="Disconnect Remote"></button>
</div>
<div class="clock-wrapper">
<i class="icon icon-bullhorn"></i>
<span class="clock" id="current-time">00:00:00</span>
</div>
<div class="remote">
<div class="text-center">
<button class="button icon-chevron-up up" id="button-up" aria-label="" title=""></button>
</div>
<div class="text-center">
<button class="button icon-minus minus" id="button-slower" aria-label="" title=""></button>
<button class="button icon-play play" id="button-play" aria-label="" title=""></button>
<button class="button icon-plus plus" id="button-faster" aria-label="" title=""></button>
</div>
<div class="text-center">
<button class="button icon-chevron-down down" id="button-down" aria-label="" title=""></button>
</div>
</div>
<div class="quick-slider">
<select id="slider-select">
<option value="font">Font</option>
<option value="scroll">Scroll</option>
<option value="speed" selected>Speed</option>
</select>
<input type="range" min="0" max="50" value="50" class="slider" id="slider">
</div>
<div class="footer text-center" id="remote-id"></div>
</div>
<script>
(function(d, s, id) {
var js, tjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = (window.location.hostname === 'promptr.tv') ? 'https://promptr.tv/remote/socket.io/socket.io.js' :
'http://' + window.location.hostname + ':3000/socket.io/socket.io.js';
tjs.parentNode.insertBefore(js, tjs);
}(document, 'script', 'teleprompter-socket'));
</script>
<script src="assets/js/remote.v120.js"></script>
<script>
// Initialize App
window.onload = function() {
TelePrompterRemote.init();
};
</script>
</body>
</html>