synclounge/app/ptsettings.html

175 lines
8.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Plex Together</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/photon.min.css">
<link rel="stylesheet" type="text/css" href="css/materialize.css">
<link rel="stylesheet" type="text/css" href="css/settings.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Javascript -->
<script src="js/vendor/jquery.min.js"></script>
<script type="text/javascript">
window.Hammer = require('./js/hammer.min.js');
</script>
<script src="js/materialize.js"></script>
<script src="js/menu.js" charset="utf-8"></script>
</head>
<body>
<div class="window">
<div class="window-content">
<div class="container" style="width: 100%">
<nav class="plex-shark windowDrag" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Join Plex Together Room</a>
<ul class="right" style="margin-right: -36px">
<li><i class="material-icons close">close</i></li>
</ul>
</div>
</nav>
<div class="settingsTitle">
<div class="row" style="margin-bottom: 0;">
<div class="col s12">
<div>
<h2 style="margin-bottom: 0;">Connect to a PT Server</h2>
</div>
</div>
</div>
<div class="row">
<div class="col s8">
<div class="input-field windowNoDrag">
<select id="PlexTogetherServers" class="browser-default" onchange="ServerSelectedChanged()">
<option value="" disabled selected>Select a PT Server</option>
<option value="custom">Custom</option>
</select>
</div>
</div>
<div class="col s1">
<div class="preloader-wrapper small active" id="ptServerPreloader" style="margin-top: 21px; margin-left:-10px; opacity:0">
<div class="spinner-layer spinner-plex-orange-only" id=ptServerSubmitLoader>
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<div class="col s1">
<i class="material-icons close hide" id="serverSuccess" style="color: #1ECD97; margin-top: 24px; margin-left: -75px">check_circle</i>
</div>
</div>
<div class="row hide" id="customField">
<div class="col s8">
<div class="input-field col s12">
<input id="ptServerCustom" type="text" class="validate" placeholder="Custom Server" style="margin-bottom: 0px;">
</div>
</div>
<div class="col s3" style="text-align: center; margin-top: 19px">
<div class="progress-button-small">
<button class="btn wave-effect waves-light plex-riverbed" onclick="customClicked()" id="ptServerSubmit" type="submit" name="action" style="width:120px"><span>Connect</span></button>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 0;">
<div class="col s12">
<div>
<h2 style="margin-bottom: 0;">Join a PT Room</h2>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 0;">
<div class="col s8">
<div class="input-field col s12">
<input id="ptRoom" type="text" class="validate" placeholder="Room Name" style="cursor: text;">
</div>
</div>
</div>
<div class="row">
<div class="col s8">
<div class="input-field col s12">
<input id="ptRoomPassword" type="text" class="validate" placeholder="Password" style="cursor: text;">
</div>
</div>
<div class="col s3" style="text-align: center; margin-top: 19px">
<div class="progress-button">
<div class="progress-button-small">
<button class="btn wave-effect waves-light plex-riverbed" id="ptRoomJoin" onclick="joinPTRoom()" type="submit" name="action" style="width:120px"><span>Join</span></button>
</div>
</div>
</div>
<div class="col s1">
<div class="preloader-wrapper small active" style="margin-top: 21px; margin-left:-27px; opacity:0">
<div class="spinner-layer spinner-plex-orange-only" id=ptRoomSubmitLoader>
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/settings.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
});
$(document).ready(function(){
$('#ptServerCustom').keypress(function(e){
if(e.keyCode==13)
$('#ptServerSubmit').click();
});
});
$(document).ready(function(){
$('#ptRoomPassword').keypress(function(e){
if(e.keyCode==13)
$('#ptRoomJoin').click();
});
});
</script>
<!-- <script>
$(document).keyup(function(e){
if(e.keyCode==27){
ipcRenderer.send('close-settings-window')
}
$('#plexClose').click();
});
</script> -->
</body>
</html>