Insecure tutorials new OpenVidu style
This commit is contained in:
pabloFuente
parent
ab9857864e
commit
d4c8e10dc9
@ -110,7 +110,7 @@ function leaveRoom() {
|
||||
// --- 6) Leave the session by calling 'disconnect' method over the Session object ---
|
||||
session.disconnect();
|
||||
|
||||
showJoinHideSession();
|
||||
// Back to welcome page
|
||||
window.location.href = window.location.origin + window.location.pathname;
|
||||
}
|
||||
|
||||
|
||||
@ -1,18 +1,11 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>openvidu-getaroom</title>
|
||||
|
||||
<title>OpenVidu getaroom</title>
|
||||
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
|
||||
<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
|
||||
|
||||
<script src="OpenVidu.js"></script>
|
||||
<script src="app.js"></script>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
crossorigin="anonymous"></script>
|
||||
@ -23,18 +16,19 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap -->
|
||||
|
||||
<!--Custom styles -->
|
||||
<link rel="styleSheet" href="style.css" type="text/css" media="screen">
|
||||
|
||||
<script src="OpenVidu.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav id="nav-join" class="navbar navbar-default" hidden>
|
||||
<nav id="nav-join" class="navbar navbar-default">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#"><span class="arciform">openVidu getaroom</span></a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-getaroom" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
<a class="navbar-brand" href="/"><img class="demo-logo" src="resources/images/openvidu_vert_white_bg_trans_cropped.png"/> getaroom</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-getaroom" title="GitHub Repository" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
<a class="navbar-brand nav-icon" href="http://www.openvidu.io/docs/tutorials/openvidu-getaroom/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -42,7 +36,7 @@
|
||||
<nav id="nav-session" class="navbar navbar-default" hidden>
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a href="http://www.openvidu.io/" target="_blank"><img src="resources/images/openvidu_globe_bg_transp_cropped.png"/></a>
|
||||
<a class="navbar-brand" href="/"><img class="demo-logo" src="resources/images/openvidu_vert_white_bg_trans_cropped.png"/> getaroom</a>
|
||||
<button id="leave-room" type="button" class="btn btn-danger" onclick="leaveRoom()">Leave Room</button>
|
||||
<form>
|
||||
<div class="input-group">
|
||||
@ -66,9 +60,9 @@
|
||||
|
||||
<!-- Join page template -->
|
||||
<div id="join" class="row no-margin" hidden>
|
||||
<div class="jumbotron col-lg-4 col-md-6 col-centered">
|
||||
<div id="img-div"><img src="resources/images/openvidu_grey_bg_transp_cropped.png" /></div>
|
||||
<h1 class="arciform">getaroom</h1>
|
||||
<div id="img-div"><img src="resources/images/openvidu_grey_bg_transp_cropped.png" /></div>
|
||||
<div id="join-dialog" class="jumbotron vertical-center">
|
||||
<h1 class="arciform">Get a room</h1>
|
||||
<button type="button" class="btn btn-success" onclick="joinRoom()">Go!</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -85,8 +79,8 @@
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="text-muted arciform">openVidu © 2017</div>
|
||||
<a href="http://www.openvidu.io/" target="_blank"><img src="resources/images/openvidu_globe_bg_transp_cropped.png"/></a>
|
||||
<div class="text-muted">OpenVidu © 2017</div>
|
||||
<a href="http://www.openvidu.io/" target="_blank"><img class="openvidu-logo" src="resources/images/openvidu_globe_bg_transp_cropped.png"/></a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 131 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -40,11 +40,15 @@ nav i.fa:hover {
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
top: 51%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.horizontal-center {
|
||||
@ -85,7 +89,7 @@ input.btn {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
.openvidu-logo {
|
||||
height: 35px;
|
||||
float: right;
|
||||
margin: 12px 0;
|
||||
@ -95,12 +99,28 @@ input.btn {
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.footer img:hover {
|
||||
.openvidu-logo:hover {
|
||||
-webkit-filter: grayscale(0.5);
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
#join h1 {
|
||||
.demo-logo {
|
||||
margin: 0;
|
||||
height: 22px;
|
||||
float: left;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
a:hover .demo-logo {
|
||||
-webkit-filter: brightness(0.7);
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
#join-dialog {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#join-dialog h1 {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
@ -108,17 +128,21 @@ input.btn {
|
||||
|
||||
#img-div {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 26%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#img-div img {
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
#join label {
|
||||
#join-dialog label {
|
||||
color: #0088aa;
|
||||
}
|
||||
|
||||
#join input.btn {
|
||||
#join-dialog input.btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@ -159,6 +183,11 @@ input.btn {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#main-video p {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
@ -189,17 +218,17 @@ input.btn {
|
||||
}
|
||||
|
||||
|
||||
.arciform {
|
||||
font-family: Arciform;
|
||||
}
|
||||
/* xs ans md screen resolutions*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Arciform';
|
||||
src: url('/resources/fonts/Arciform.eot'); /* IE9 Compat Modes */
|
||||
src: url('/resources/fonts/Arciform.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('/resources/fonts/Arciform.woff') format('woff'), /* Modern Browsers */
|
||||
url('/resources/fonts/Arciform.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('/resources/fonts/Arciform.svg#svgFontName') format('svg'); /* Legacy iOS */
|
||||
@media screen and (max-width: 991px) {
|
||||
.vertical-center {
|
||||
width: 85%;
|
||||
padding-top: 10px;
|
||||
top: 57%;
|
||||
}
|
||||
#img-div {
|
||||
top: 32%;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
@ -333,18 +362,8 @@ nav#nav-session div.container {
|
||||
padding-bottom: 8;
|
||||
}
|
||||
|
||||
nav#nav-session img {
|
||||
height: 35px;
|
||||
float: left;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
-moz-transition: all 0.1s ease-in-out;
|
||||
-o-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
nav#nav-session img:hover {
|
||||
-webkit-filter: grayscale(0.5);
|
||||
filter: grayscale(0.5);
|
||||
nav#nav-session .navbar-brand {
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
#leave-room {
|
||||
|
||||
@ -1,23 +1,3 @@
|
||||
.stream-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#session {
|
||||
padding-top: 70px;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#session-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#session-title {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#buttonLeaveSession {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@ -1,19 +1,22 @@
|
||||
<div class="container vertical-center">
|
||||
<div *ngIf="!session" id="join" class="jumbotron horizontal-center">
|
||||
<h1>Join a video session</h1>
|
||||
<form class="form-group" (submit)="joinSession()">
|
||||
<p>
|
||||
<label>Participant</label>
|
||||
<input class="form-control" type="text" name="token" id="participantId" [(ngModel)]="token" required>
|
||||
</p>
|
||||
<p>
|
||||
<label>Session</label>
|
||||
<input class="form-control" type="text" name="sessionId" id="sessionId" [(ngModel)]="sessionId" required>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!">
|
||||
</p>
|
||||
</form>
|
||||
<div id="main-container" class="container">
|
||||
<div *ngIf="!session" id="join">
|
||||
<div id="img-div"><img src="src/assets/images/openvidu_grey_bg_transp_cropped.png" /></div>
|
||||
<div id="join-dialog" class="jumbotron vertical-center">
|
||||
<h1>Join a video session</h1>
|
||||
<form class="form-group" (submit)="joinSession()">
|
||||
<p>
|
||||
<label>Participant</label>
|
||||
<input class="form-control" type="text" id="participantId" name="participantId" [(ngModel)]="token" required>
|
||||
</p>
|
||||
<p>
|
||||
<label>Session</label>
|
||||
<input class="form-control" type="text" id="sessionId" name="sessionId" [(ngModel)]="sessionId" required>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="session" id="session">
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
@ -21,23 +21,24 @@
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">OpenVidu Tutorial</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-insecure-angular" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="/"><img class="demo-logo" src="src/assets/images/openvidu_vert_white_bg_trans_cropped.png"/> Insecure Angular</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-insecure-angular" title="GitHub Repository" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
<a class="navbar-brand nav-icon" href="http://www.openvidu.io/docs/tutorials/openvidu-insecure-angular/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<app-root>Loading...</app-root>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="text-muted">OpenVidu © 2017</div>
|
||||
<a href="http://www.codeurjc.es/" target="_blank"><img src="https://codeurjc.files.wordpress.com/2016/01/logo_cetrado_negro.png?w=275&h=165"/></a>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="text-muted">OpenVidu © 2017</div>
|
||||
<a href="http://www.openvidu.io/" target="_blank"><img class="openvidu-logo" src="src/assets/images/openvidu_globe_bg_transp_cropped.png"/></a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -5,8 +5,12 @@ html {
|
||||
|
||||
nav {
|
||||
height: 50px;
|
||||
position: absolute !important;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
background-color: #4d4d4d !important;
|
||||
border-color: #4d4d4d !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
@ -18,44 +22,201 @@ nav {
|
||||
float: right;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #ccc !important;
|
||||
}
|
||||
|
||||
nav i.fa {
|
||||
font-size: 40px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #a9a9a9 !important;
|
||||
}
|
||||
|
||||
nav i.fa:hover {
|
||||
font-size: 40px;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
min-height: 80%;
|
||||
min-height: 80vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 56%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.horizontal-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: #0088aa;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #0088aa;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
|
||||
}
|
||||
|
||||
input.btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #0088aa !important;
|
||||
border-color: #0088aa;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #f8f8f8;
|
||||
background-color: #4d4d4d;
|
||||
}
|
||||
|
||||
.footer .text-muted {
|
||||
margin: 20px 0;
|
||||
float: left;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
height: 50px;
|
||||
.openvidu-logo {
|
||||
height: 35px;
|
||||
float: right;
|
||||
margin: 5px 0;
|
||||
margin: 12px 0;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
-moz-transition: all 0.1s ease-in-out;
|
||||
-o-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
#main-video video {
|
||||
cursor: auto;
|
||||
.openvidu-logo:hover {
|
||||
-webkit-filter: grayscale(0.5);
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
.demo-logo {
|
||||
margin: 0;
|
||||
height: 22px;
|
||||
float: left;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
a:hover .demo-logo {
|
||||
-webkit-filter: brightness(0.7);
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
#join-dialog h1 {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#img-div {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 19%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#img-div img {
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
#join-dialog label {
|
||||
color: #0088aa;
|
||||
}
|
||||
|
||||
#join-dialog input.btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#session-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#session-title {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#buttonLeaveSession {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#video-container video {
|
||||
position: relative;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#video-container p {
|
||||
display: inline-block;
|
||||
background: #f8f8f8;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#main-video p {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
background: #f8f8f8;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
left: 0;
|
||||
font-size: 22px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
#main-video video {
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
#session img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
object-fit: contain;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
#session #video-container img {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
|
||||
/* xs ans md screen resolutions*/
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.vertical-center {
|
||||
width: 85%;
|
||||
padding-top: 10px;
|
||||
top: 57%;
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,7 @@
|
||||
<title>openvidu-insecure-js</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
|
||||
<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
@ -25,28 +26,32 @@
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">OpenVidu Tutorial</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-insecure-js" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
<a class="navbar-brand" href="/"><img class="demo-logo" src="resources/images/openvidu_vert_white_bg_trans_cropped.png"/> Insecure JS</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-insecure-js" title="GitHub Repository" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
<a class="navbar-brand nav-icon" href="http://www.openvidu.io/docs/tutorials/openvidu-insecure-js/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container vertical-center">
|
||||
<div id="join" class="jumbotron horizontal-center">
|
||||
<h1>Join a video session</h1>
|
||||
<form class="form-group" onsubmit="return joinSession()">
|
||||
<p>
|
||||
<label>Participant</label>
|
||||
<input class="form-control" type="text" id="participantId" required>
|
||||
</p>
|
||||
<p>
|
||||
<label>Session</label>
|
||||
<input class="form-control" type="text" id="sessionId" required>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!">
|
||||
</p>
|
||||
</form>
|
||||
<div id="main-container" class="container">
|
||||
<div id="join">
|
||||
<div id="img-div"><img src="resources/images/openvidu_grey_bg_transp_cropped.png" /></div>
|
||||
<div id="join-dialog" class="jumbotron vertical-center">
|
||||
<h1>Join a video session</h1>
|
||||
<form class="form-group" onsubmit="return joinSession()">
|
||||
<p>
|
||||
<label>Participant</label>
|
||||
<input class="form-control" type="text" id="participantId" required>
|
||||
</p>
|
||||
<p>
|
||||
<label>Session</label>
|
||||
<input class="form-control" type="text" id="sessionId" required>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="session" style="display: none;">
|
||||
@ -62,7 +67,7 @@
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="text-muted">OpenVidu © 2017</div>
|
||||
<a href="http://www.codeurjc.es/" target="_blank"><img src="https://codeurjc.files.wordpress.com/2016/01/logo_cetrado_negro.png?w=275&h=165"/></a>
|
||||
<a href="http://www.openvidu.io/" target="_blank"><img class="openvidu-logo" src="resources/images/openvidu_globe_bg_transp_cropped.png"/></a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
BIN
openvidu-insecure-js/web/resources/images/favicon.ico
Normal file
BIN
openvidu-insecure-js/web/resources/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -5,8 +5,12 @@ html {
|
||||
|
||||
nav {
|
||||
height: 50px;
|
||||
position: absolute !important;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
background-color: #4d4d4d !important;
|
||||
border-color: #4d4d4d !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
@ -18,45 +22,124 @@ nav {
|
||||
float: right;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #ccc !important;
|
||||
}
|
||||
|
||||
nav i.fa {
|
||||
font-size: 40px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #a9a9a9 !important;
|
||||
}
|
||||
|
||||
nav i.fa:hover {
|
||||
font-size: 40px;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
min-height: 80%;
|
||||
min-height: 80vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 56%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.horizontal-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: #0088aa;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #0088aa;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
|
||||
}
|
||||
|
||||
input.btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #0088aa !important;
|
||||
border-color: #0088aa;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #f8f8f8;
|
||||
background-color: #4d4d4d;
|
||||
}
|
||||
|
||||
.footer .text-muted {
|
||||
margin: 20px 0;
|
||||
float: left;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
height: 50px;
|
||||
.openvidu-logo {
|
||||
height: 35px;
|
||||
float: right;
|
||||
margin: 5px 0;
|
||||
margin: 12px 0;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
-moz-transition: all 0.1s ease-in-out;
|
||||
-o-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
#session {
|
||||
padding-top: 70px;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.openvidu-logo:hover {
|
||||
-webkit-filter: grayscale(0.5);
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
.demo-logo {
|
||||
margin: 0;
|
||||
height: 22px;
|
||||
float: left;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
a:hover .demo-logo {
|
||||
-webkit-filter: brightness(0.7);
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
#join-dialog h1 {
|
||||
color: #4d4d4d;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#img-div {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 19%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#img-div img {
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
#join-dialog label {
|
||||
color: #0088aa;
|
||||
}
|
||||
|
||||
#join-dialog input.btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#session-header {
|
||||
@ -92,8 +175,8 @@ nav i.fa {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
video {
|
||||
@ -109,6 +192,34 @@ video {
|
||||
padding-right: 5px;
|
||||
font-size: 22px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
#session img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
object-fit: contain;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
#session #video-container img {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
|
||||
/* xs ans md screen resolutions*/
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.vertical-center {
|
||||
width: 85%;
|
||||
padding-top: 10px;
|
||||
top: 57%;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user