neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

openvidu-js-node new OpenVidu style

Browse Source
This commit is contained in:
pabloFuente 2017-07-26 11:56:02 +02:00
parent 7273768ad0
commit e84109fe8a
8 changed files with 155 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openvidu-js-java/src/main/resources/static/index.html
View File

@ -98,9 +98,7 @@
<button class="btn btn-lg btn-success" onclick="joinSession()">Join!</button>
</p>
</form>
<hr style="
background: #4d4d4d;
">
<hr>
<div id="login-info">
<div>Logged as <span id="name-user">publisher1</span></div>
<button id="logout-btn" class="btn btn-warning" onclick="logOut()">Log out</button>

4
openvidu-js-java/src/main/resources/static/style.css
View File

@ -130,6 +130,10 @@ a:hover .demo-logo {
margin-top: 15px;
}
#join-dialog hr {
background: #4d4d4d;
}
#img-div {
text-align: center;
padding-bottom: 3em;

BIN
openvidu-js-node/public/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
openvidu-js-node/public/images/openvidu_globe_bg_transp_cropped.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
openvidu-js-node/public/images/openvidu_grey_bg_transp_cropped.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
openvidu-js-node/public/images/openvidu_vert_white_bg_trans_cropped.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

38
openvidu-js-node/public/index.html
View File

@ -4,6 +4,7 @@
<title>openvidu-js-node</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="shortcut icon" href="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="
@ -32,14 +33,17 @@
<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-js-node" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
<a class="navbar-brand" href="/"><img class="demo-logo" src="images/openvidu_vert_white_bg_trans_cropped.png"/> JS Node</a>
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-js-node" 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-js-node/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
</div>
</div>
</nav>
<div class="container vertical-center">
<div id="not-logged" class="horizontal-center">
<div id="main-container" class="container">
<div id="not-logged" class="vertical-center">
<div id="img-div"><img src="images/openvidu_grey_bg_transp_cropped.png" /></div>
<form class="form-group jumbotron" onsubmit="return false">
<p>
<label>User</label><input class="form-control" type="text" id="user" required>
@ -76,13 +80,10 @@
</table>
</div>
<div id="logged" class="horizontal-center" hidden>
<div id="join">
<div id="login-info">
<div>Logged as <span id="name-user"></span></div>
<button id="logout-btn" class="btn btn-warning" onclick="logOut()">Log out</button>
</div>
<div class="jumbotron">
<div id="logged" hidden>
<div id="join" class="vertical-center">
<div id="img-div"><img src="images/openvidu_grey_bg_transp_cropped.png" /></div>
<div id="join-dialog" class="jumbotron">
<h1>Join a video session</h1>
<form class="form-group" onsubmit="return false">
<p>
@ -94,9 +95,14 @@
<input class="form-control" type="text" id="sessionName" required>
</p>
<p class="text-center">
<button id="join-btn" class="btn btn-lg btn-success" onclick="joinSession()">Join!</button>
<button class="btn btn-lg btn-success" onclick="joinSession()">Join!</button>
</p>
</form>
<hr>
<div id="login-info">
<div>Logged as <span id="name-user">publisher1</span></div>
<button id="logout-btn" class="btn btn-warning" onclick="logOut()">Log out</button>
</div>
</div>
</div>
@ -105,7 +111,11 @@
<h1 id="session-title"></h1>
<input class="btn btn-large btn-danger" type="button" id="buttonLeaveSession" onmouseup="removeUser(); leaveSession()" value="Leave session">
</div>
<div id="main-video" class="col-md-6"><p class="nickName"></p><p class="userName"></p><video autoplay src=""></video></div>
<div id="main-video" class="col-md-6">
<p class="nickName"></p>
<p class="userName"></p>
<video autoplay src=""></video>
</div>
<div id="video-container" class="col-md-6"></div>
</div>
</div>
@ -114,7 +124,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="images/openvidu_globe_bg_transp_cropped.png"/></a>
</div>
</footer>

143
openvidu-js-node/public/style.css
View File

@ -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,38 +22,125 @@ 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: 100%;
min-height: 100vh;
display: flex;
align-items: center;
position: absolute;
top: 50%;
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;
}
.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;
}
#join-dialog label {
color: #0088aa;
}
#join-dialog input.btn {
margin-top: 15px;
}
#join-dialog hr {
background: #4d4d4d;
}
#img-div {
text-align: center;
padding-bottom: 3em;
}
#img-div img {
height: 15%;
}
#logged {
@ -61,13 +152,6 @@ nav i.fa {
margin: auto;
}
#session {
padding-top: 70px;
height: 100vh;
height: 100%;
width: 100%;
}
#session-header {
margin-bottom: 20px;
}
@ -178,7 +262,6 @@ table i {
#login-info {
text-align: right;
margin-bottom: 1em;
}
#login-info div {
@ -188,4 +271,30 @@ table i {
#name-user {
font-weight: bold;
}
/* xs ans md screen resolutions*/
@media screen and (max-width: 991px) {
.container .navbar-header {
margin-right: 0 !important;
margin-left: 0 !important;
}
.nav-icon {
padding: 9px 8px 9px 8px;
}
nav i.fa {
font-size: 32px;
}
.vertical-center {
width: 85%;
padding-top: 10px;
}
#img-div {
padding-bottom: 1em;
}
#img-div img {
height: 10%;
}
}