<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin-left: auto;
margin-right: auto;
display: block
}
</style>
</head>
<body>
<div>
<video class="center" src="files/uploads/video.mov" controls poster="" width="1440"></video>
</div>
</body>
</html>
HTML5 Boilterplate with W3.CSS <!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web-App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
</body>
</html>
<script>
$(document).ready(function(){
});
</script>
<!DOCTYPE html>
<html lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!--
<script src="/home/js/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<link rel="icon" href="/home/images/logo.png">
<link rel="shortcut icon" href="/home/images/logo.png">
-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<link rel="icon" href="https://raw.githubusercontent.com/giridharmb/images/master/git/logo.png">
<link rel="shortcut icon" href="https://raw.githubusercontent.com/giridharmb/images/master/git/logo.png">
<script>
let socket = {};
let protocol = $(location).attr('protocol');
let is_https;
is_https = protocol.includes("https");
let ws_protocol;
if (is_https === true) {
console.log("Need to do WS Upgrade.");
ws_protocol = "wss://";
}
else {
console.log("Do not need to a WS Upgrade.");
ws_protocol = "ws://";
}
</script>
<title>Welcome</title>
</head>
<body>
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:130px">
<h5 class="w3-bar-item">Menu</h5>
<button class="w3-bar-item w3-button tablink" onclick="openDetails(event, 'main_link_1')">London</button>
<button class="w3-bar-item w3-button tablink" onclick="openDetails(event, 'main_link_2')">Paris</button>
<button class="w3-bar-item w3-button tablink" onclick="openDetails(event, 'main_link_3')">Tokyo</button>
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion<i class="fa fa-caret-down"></i></button>
<div id="demoAcc" class="w3-hide w3-white w3-card">
<a href="#" class="w3-bar-item w3-button tablink" onclick="openDetails(event, 'main_link_4')">Link1</a>
<a href="#" class="w3-bar-item w3-button tablink" onclick="openDetails(event, 'main_link_5')">Link2</a>
</div>
</div>
<div style="margin-left:130px">
<div class="w3-padding w3-card w3-blue">
Welcome To Home Page
</div>
<div id="main_link_1" class="w3-container maniMenu" style="display:none">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div id="main_link_2" class="w3-container maniMenu" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
</div>
<div id="main_link_3" class="w3-container maniMenu" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</div>
<div id="main_link_4" class="w3-container maniMenu" style="display:none">
<h2>Link-1</h2>
<p>Contents of Link-1</p>
</div>
<div id="main_link_5" class="w3-container maniMenu" style="display:none">
<h2>Link-2</h2>
<p>Contents of Link-2</p>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
socket = new WebSocket(ws_protocol + $(location).attr('host') + "/ws");
console.log("Attempting Connection...");
socket.onmessage = receivedData => {
console.log("message received");
console.log("--receivedData.data--");
console.log(receivedData.data);
};
socket.onopen = () => {
console.log("Successfully Connected");
socket.send("Hi From the Client!")
};
socket.onclose = event => {
console.log("Socket Closed Connection: ", event);
socket.send("Client Closed!")
};
socket.onerror = error => {
console.log("Socket Error: ", error);
};
setInterval(function () {
if (socket.readyState === 1) {
socket.send(JSON.stringify({ data: "ping" }));
}
}, 5000);
});
function openDetails(evt, details_name) {
let i, x, tablinks;
x = document.getElementsByClassName("maniMenu");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(details_name).style.display = "block";
evt.currentTarget.className += " w3-red";
}
function myAccFunc() {
let x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") === -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className = x.previousElementSibling.className.replace(" w3-green", "");
}
}
</script>
