openvidu-mvc-java and openvidu-mvc-node new OpenVidu style
This commit is contained in:
pabloFuente
parent
e84109fe8a
commit
9dcd0d9d41
@ -36,7 +36,6 @@ nav a:hover {
|
||||
}
|
||||
|
||||
nav i.fa:hover {
|
||||
font-size: 40px;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
@ -70,9 +69,18 @@ input.btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #0088aa !important;
|
||||
border-color: #0088aa;
|
||||
background-color: #1dd36b !important;
|
||||
border-color: #1dd36b;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #1abd61 !important;
|
||||
border-color: #1abd61;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
||||
@ -36,7 +36,6 @@ nav a:hover {
|
||||
}
|
||||
|
||||
nav i.fa:hover {
|
||||
font-size: 40px;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
@ -70,9 +69,18 @@ input.btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #0088aa !important;
|
||||
border-color: #0088aa;
|
||||
background-color: #1dd36b !important;
|
||||
border-color: #1dd36b;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #1abd61 !important;
|
||||
border-color: #1abd61;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
</form>
|
||||
<hr>
|
||||
<div id="login-info">
|
||||
<div>Logged as <span id="name-user">publisher1</span></div>
|
||||
<div>Logged as <span id="name-user"></span></div>
|
||||
<button id="logout-btn" class="btn btn-warning" onclick="logOut()">Log out</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,7 +36,6 @@ nav a:hover {
|
||||
}
|
||||
|
||||
nav i.fa:hover {
|
||||
font-size: 40px;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
@ -70,11 +69,54 @@ input.btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #1dd36b !important;
|
||||
border-color: #1dd36b;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #1abd61 !important;
|
||||
border-color: #1abd61;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: #0088aa !important;
|
||||
border-color: #0088aa;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background-color: #00708c !important;
|
||||
border-color: #00708c;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #ffcc3a !important;
|
||||
border-color: #ffcc3a;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background-color: #eabb3a !important;
|
||||
border-color: #eabb3a;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:active {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:focus {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:active:focus {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
</form>
|
||||
<hr>
|
||||
<div id="login-info">
|
||||
<div>Logged as <span id="name-user">publisher1</span></div>
|
||||
<div>Logged as <span id="name-user"></span></div>
|
||||
<button id="logout-btn" class="btn btn-warning" onclick="logOut()">Log out</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,7 +36,6 @@ nav a:hover {
|
||||
}
|
||||
|
||||
nav i.fa:hover {
|
||||
font-size: 40px;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
@ -70,11 +69,54 @@ input.btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #1dd36b !important;
|
||||
border-color: #1dd36b;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #1abd61 !important;
|
||||
border-color: #1abd61;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: #0088aa !important;
|
||||
border-color: #0088aa;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background-color: #00708c !important;
|
||||
border-color: #00708c;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #ffcc3a !important;
|
||||
border-color: #ffcc3a;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background-color: #eabb3a !important;
|
||||
border-color: #eabb3a;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:active {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:focus {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:active:focus {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
BIN
openvidu-mvc-java/src/main/resources/static/images/favicon.ico
Normal file
BIN
openvidu-mvc-java/src/main/resources/static/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,38 +22,167 @@ 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 {
|
||||
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 {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #1dd36b !important;
|
||||
border-color: #1dd36b;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #1abd61 !important;
|
||||
border-color: #1abd61;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: #0088aa !important;
|
||||
border-color: #0088aa;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background-color: #00708c !important;
|
||||
border-color: #00708c;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #ffcc3a !important;
|
||||
border-color: #ffcc3a;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background-color: #eabb3a !important;
|
||||
border-color: #eabb3a;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:active {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:focus {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:active:focus {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -58,14 +191,7 @@ nav i.fa {
|
||||
|
||||
#join {
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#session {
|
||||
padding-top: 70px;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#session-header {
|
||||
@ -111,12 +237,12 @@ nav i.fa {
|
||||
|
||||
#video-container p.userName {
|
||||
float: right;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 0px;
|
||||
font-weight: lighter;
|
||||
font-size: 12px;
|
||||
background: #777777;
|
||||
color: #f8f8f8;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 0px;
|
||||
font-weight: lighter;
|
||||
font-size: 12px;
|
||||
background: #777777;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
video {
|
||||
@ -140,15 +266,16 @@ video {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 16px !important;
|
||||
margin-right: 15px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 0px;
|
||||
font-weight: lighter;
|
||||
font-size: 12px;
|
||||
background: #777777;
|
||||
color: #f8f8f8;
|
||||
margin-right: 15px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 0px;
|
||||
font-weight: lighter;
|
||||
font-size: 12px;
|
||||
background: #777777;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
|
||||
#session img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@ -181,7 +308,6 @@ table i {
|
||||
|
||||
#login-info {
|
||||
text-align: right;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#login-info form {
|
||||
@ -195,4 +321,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%;
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,7 @@
|
||||
<title>openvidu-mvc-java</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"></meta>
|
||||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"></link>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
@ -23,22 +24,19 @@
|
||||
<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-mvc-java" 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"/> MVC Java</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-mvc-java" 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-mvc-java/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container vertical-center">
|
||||
<div id="logged" class="horizontal-center">
|
||||
<div id="join">
|
||||
<div id="login-info">
|
||||
<div>Logged as <span th:text="${username}" id="name-user"></span></div>
|
||||
<form action="/logout" method="post">
|
||||
<button id="logout-btn" class="btn btn-warning" type="submit">Log out</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="jumbotron">
|
||||
<div id="main-container" class="container">
|
||||
<div id="logged">
|
||||
<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" action="/session" method="post">
|
||||
<p>
|
||||
@ -53,6 +51,13 @@
|
||||
<button class="btn btn-lg btn-success" type="submit">Join!</button>
|
||||
</p>
|
||||
</form>
|
||||
<hr></hr>
|
||||
<div id="login-info">
|
||||
<div>Logged as <span th:text="${username}" id="name-user"></span></div>
|
||||
<form action="/logout" method="post">
|
||||
<button id="logout-btn" class="btn btn-warning" type="submit">Log out</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -61,7 +66,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>
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<title>openvidu-mvc-java</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"></meta>
|
||||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"></link>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
@ -30,22 +31,23 @@
|
||||
<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-mvc-java" 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"/> MVC Java</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-mvc-java" 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-mvc-java/" 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" action="/dashboard" method="post">
|
||||
<p>
|
||||
<label>User</label>
|
||||
<input class="form-control" type="text" name="user" required="true"></input>
|
||||
<label>User</label><input class="form-control" type="text" name="user" required="true"></input>
|
||||
</p>
|
||||
<p>
|
||||
<label>Pass</label>
|
||||
<input class="form-control" type="password" name="pass" required="true"></input>
|
||||
<label>Pass</label><input class="form-control" type="password" name="pass" required="true"></input>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<button class="btn btn-lg btn-info" type="submit">Log in</button>
|
||||
@ -80,7 +82,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>
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<title>openvidu-mvc-java</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"></meta>
|
||||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"></link>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
@ -24,14 +25,16 @@
|
||||
<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-mvc-java" 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"/> MVC Java</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-mvc-java" 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-mvc-java/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container vertical-center">
|
||||
<div id="logged" class="horizontal-center">
|
||||
<div id="main-container" class="container">
|
||||
<div id="logged">
|
||||
<div id="session">
|
||||
<div id="session-header">
|
||||
<h1 th:text="${sessionName}" id="session-title"></h1>
|
||||
@ -55,7 +58,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>
|
||||
|
||||
|
||||
BIN
openvidu-mvc-node/public/images/favicon.ico
Normal file
BIN
openvidu-mvc-node/public/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,38 +22,167 @@ 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 {
|
||||
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 {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #1dd36b !important;
|
||||
border-color: #1dd36b;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #1abd61 !important;
|
||||
border-color: #1abd61;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background-color: #0088aa !important;
|
||||
border-color: #0088aa;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
background-color: #00708c !important;
|
||||
border-color: #00708c;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #ffcc3a !important;
|
||||
border-color: #ffcc3a;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background-color: #eabb3a !important;
|
||||
border-color: #eabb3a;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:active {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:focus {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.btn-warning:active:focus {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -58,14 +191,7 @@ nav i.fa {
|
||||
|
||||
#join {
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#session {
|
||||
padding-top: 70px;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#session-header {
|
||||
@ -111,12 +237,12 @@ nav i.fa {
|
||||
|
||||
#video-container p.userName {
|
||||
float: right;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 0px;
|
||||
font-weight: lighter;
|
||||
font-size: 12px;
|
||||
background: #777777;
|
||||
color: #f8f8f8;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 0px;
|
||||
font-weight: lighter;
|
||||
font-size: 12px;
|
||||
background: #777777;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
video {
|
||||
@ -140,15 +266,16 @@ video {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 16px !important;
|
||||
margin-right: 15px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 0px;
|
||||
font-weight: lighter;
|
||||
font-size: 12px;
|
||||
background: #777777;
|
||||
color: #f8f8f8;
|
||||
margin-right: 15px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 0px;
|
||||
font-weight: lighter;
|
||||
font-size: 12px;
|
||||
background: #777777;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
|
||||
#session img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@ -181,7 +308,6 @@ table i {
|
||||
|
||||
#login-info {
|
||||
text-align: right;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#login-info form {
|
||||
@ -195,4 +321,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%;
|
||||
}
|
||||
}
|
||||
@ -1,9 +1,10 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>openvidu-mvc-java</title>
|
||||
<title>openvidu-mvc-node</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"></meta>
|
||||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"></link>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
@ -23,22 +24,19 @@
|
||||
<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-mvc-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"/> MVC Node</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-mvc-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-mvc-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="logged" class="horizontal-center">
|
||||
<div id="join">
|
||||
<div id="login-info">
|
||||
<div>Logged as <span th:text="${username}" id="name-user"></span></div>
|
||||
<form action="/logout" method="post">
|
||||
<button id="logout-btn" class="btn btn-warning" type="submit">Log out</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="jumbotron">
|
||||
<div id="main-container" class="container">
|
||||
<div id="logged">
|
||||
<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" action="/session" method="post">
|
||||
<p>
|
||||
@ -53,6 +51,13 @@
|
||||
<button class="btn btn-lg btn-success" type="submit">Join!</button>
|
||||
</p>
|
||||
</form>
|
||||
<hr></hr>
|
||||
<div id="login-info">
|
||||
<div>Logged as <span id="name-user"><%= user %></span></div>
|
||||
<form action="/logout" method="post">
|
||||
<button id="logout-btn" class="btn btn-warning" type="submit">Log out</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -61,7 +66,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>
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<title>openvidu-mvc-node</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"></meta>
|
||||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"></link>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
@ -30,22 +31,23 @@
|
||||
<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-mvc-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"/> MVC Node</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-mvc-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-mvc-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" action="/dashboard" method="post">
|
||||
<p>
|
||||
<label>User</label>
|
||||
<input class="form-control" type="text" name="user" required="true"></input>
|
||||
<label>User</label><input class="form-control" type="text" name="user" required="true"></input>
|
||||
</p>
|
||||
<p>
|
||||
<label>Pass</label>
|
||||
<input class="form-control" type="password" name="pass" required="true"></input>
|
||||
<label>Pass</label><input class="form-control" type="password" name="pass" required="true"></input>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<button class="btn btn-lg btn-info" type="submit">Log in</button>
|
||||
@ -80,7 +82,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>
|
||||
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>openvidu-mvc-java</title>
|
||||
<title>openvidu-mvc-node</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"></meta>
|
||||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"></link>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
@ -24,20 +25,22 @@
|
||||
<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-mvc-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"/> MVC Node</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-mvc-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-mvc-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="logged" class="horizontal-center">
|
||||
<div id="main-container" class="container">
|
||||
<div id="logged">
|
||||
<div id="session">
|
||||
<div id="session-header">
|
||||
<h1 id="session-title"><%= sessionName %></h1>
|
||||
<form action="/leave-session" method="post">
|
||||
<input style="display:none" name="sessionname" value="<%= sessionName %>"></input>
|
||||
<input style="display:none" name="token" value="<%= token %>"></input>
|
||||
<input type="hidden" name="session-name" value="<%= sessionName %>"></input>
|
||||
<input type="hidden" name="token" value="<%= token %>"></input>
|
||||
<button id="buttonLeaveSession" class="btn btn-large btn-danger" type="submit" onclick="leaveSession()">
|
||||
Leave session</button>
|
||||
</form>
|
||||
@ -55,7 +58,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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user