Added htdocs
This commit is contained in:
parent
639799a8e8
commit
a7720fa34c
GPG key ID:
214701A3BD4B06F2
12 changed files with 354 additions and 21 deletions
6
htdocs/assets/bootstrap/css/bootstrap.min.css
vendored
Normal file
6
htdocs/assets/bootstrap/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
htdocs/assets/bootstrap/js/bootstrap.min.js
vendored
Normal file
7
htdocs/assets/bootstrap/js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
114
htdocs/assets/css/Navigation-with-Search.css
Normal file
114
htdocs/assets/css/Navigation-with-Search.css
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
.navigation-clean-search {
|
||||
background: #fff;
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
color: #333;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.navigation-clean-search {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-clean-search .navbar-brand {
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.navigation-clean-search .navbar-brand:hover {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.navigation-clean-search .navbar-toggler {
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.navigation-clean-search .navbar-toggler:hover, .navigation-clean-search .navbar-toggler:focus {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.navigation-clean-search .navbar-toggler {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.navigation-clean-search .navbar-collapse, .navigation-clean-search .form-inline {
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
|
||||
.navigation-clean-search .navbar-nav a.active, .navigation-clean-search .navbar-nav > .show > a {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navigation-clean-search.navbar-light .navbar-nav a.active, .navigation-clean-search.navbar-light .navbar-nav a.active:focus, .navigation-clean-search.navbar-light .navbar-nav a.active:hover {
|
||||
color: #8f8f8f;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navigation-clean-search.navbar .navbar-nav .nav-link {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.navigation-clean-search.navbar-light .navbar-nav .nav-link {
|
||||
color: #465765;
|
||||
}
|
||||
|
||||
.navigation-clean-search.navbar-light .navbar-nav .nav-link:focus, .navigation-clean-search.navbar-light .navbar-nav .nav-link:hover {
|
||||
color: #37434d !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navigation-clean-search .action-button, .navigation-clean-button .action-button:active {
|
||||
background: #56c6c6;
|
||||
border-radius: 20px;
|
||||
font-size: inherit;
|
||||
color: #fff !important;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
text-shadow: none;
|
||||
padding: 8px 20px;
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
.navigation-clean-search .action-button:hover, .navigation-clean-search .action-button:focus {
|
||||
background: #66d7d7;
|
||||
}
|
||||
|
||||
.navigation-clean-search .form-inline label {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.navigation-clean-search .form-inline .search-field {
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
color: #ccc;
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
transition: border-bottom-color 0.3s;
|
||||
}
|
||||
|
||||
@media (max-width:767px) {
|
||||
.navigation-clean-search .form-inline .search-field {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-clean-search .form-inline .search-field:focus {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
|
||||
}
|
||||
|
||||
0
htdocs/assets/css/styles.css
Normal file
0
htdocs/assets/css/styles.css
Normal file
1
htdocs/assets/css/styles.min.css
vendored
Normal file
1
htdocs/assets/css/styles.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.navigation-clean-search{background:#fff;padding-top:.75rem;padding-bottom:.75rem;color:#333;border-radius:0;box-shadow:none;border:none;margin-bottom:0}@media (min-width:768px){.navigation-clean-search{padding-top:1rem;padding-bottom:1rem}}.navigation-clean-search .navbar-brand{font-weight:700;color:inherit}.navigation-clean-search .navbar-brand:hover{color:#222}.navigation-clean-search .navbar-toggler{border-color:#ddd;color:#888}.navigation-clean-search .navbar-toggler:focus,.navigation-clean-search .navbar-toggler:hover{background:0 0}.navigation-clean-search .form-inline,.navigation-clean-search .navbar-collapse{border-top-color:#ddd}.navigation-clean-search .navbar-nav a.active,.navigation-clean-search .navbar-nav>.show>a{background:0 0;box-shadow:none}.navigation-clean-search.navbar-light .navbar-nav a.active,.navigation-clean-search.navbar-light .navbar-nav a.active:focus,.navigation-clean-search.navbar-light .navbar-nav a.active:hover{color:#8f8f8f;box-shadow:none;background:0 0;pointer-events:none}.navigation-clean-search.navbar .navbar-nav .nav-link{padding-left:18px;padding-right:18px}.navigation-clean-search.navbar-light .navbar-nav .nav-link{color:#465765}.navigation-clean-search.navbar-light .navbar-nav .nav-link:focus,.navigation-clean-search.navbar-light .navbar-nav .nav-link:hover{color:#37434d!important;background-color:transparent}.navigation-clean-button .action-button:active,.navigation-clean-search .action-button{background:#56c6c6;border-radius:20px;font-size:inherit;color:#fff!important;box-shadow:none;border:none;text-shadow:none;padding:8px 20px;transition:background-color .25s}.navigation-clean-search .action-button:focus,.navigation-clean-search .action-button:hover{background:#66d7d7}.navigation-clean-search .form-inline label{color:#ccc}.navigation-clean-search .form-inline .search-field{background:0 0;border:none;border-bottom:1px solid transparent;border-radius:0;box-shadow:none;color:inherit;transition:border-bottom-color .3s}@media (max-width:767px){.navigation-clean-search .form-inline .search-field{display:inline-block;width:80%}}.navigation-clean-search .form-inline .search-field:focus{border-bottom:1px solid #ccc}
|
||||
78
htdocs/assets/js/chat.js
Normal file
78
htdocs/assets/js/chat.js
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
String.prototype.replaceAll = function(search, replacement) {
|
||||
var target = this;
|
||||
return target.split(search).join(replacement);
|
||||
};
|
||||
var submit = document.getElementById('s');
|
||||
joypixels.ascii = true;
|
||||
|
||||
function encodeQueryData(data) {
|
||||
const ret = [];
|
||||
for (let d in data)
|
||||
ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
|
||||
return ret.join('&');
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
var formElement = document.forms.namedItem("sendmsg")
|
||||
var formData = new FormData(formElement);
|
||||
if(formData.get("message") != "%0D%0A"){
|
||||
var data = {'id': formData.get("id"), 'message' : formData.get("message") }
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', window.location.href, true);
|
||||
xhr.onload = function () {
|
||||
|
||||
console.log(this.responseText);
|
||||
};
|
||||
xhr.send(encodeQueryData(data));
|
||||
}
|
||||
$('#message').val('');
|
||||
}
|
||||
|
||||
var fetch_messages = new XMLHttpRequest();
|
||||
var url = window.location.href + ".txt";
|
||||
|
||||
setInterval(function(){
|
||||
fetch_messages.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) loadMessages(this.responseText.split("\n"));
|
||||
};
|
||||
fetch_messages.open("GET", url, true);
|
||||
fetch_messages.send();
|
||||
},1000);
|
||||
|
||||
function scrollSmoothToBottom (id) {
|
||||
var div = document.getElementById(id);
|
||||
$('#' + id).animate({
|
||||
scrollTop: div.scrollHeight - div.clientHeight
|
||||
}, 500);
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$("#message").keypress(function (e) {
|
||||
var code = (e.keyCode ? e.keyCode : e.which);
|
||||
if (code == 13) {
|
||||
$("#s").trigger('click');
|
||||
$('#message').val('');
|
||||
return true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
function loadMessages(arr) {
|
||||
var out = "";
|
||||
var i;
|
||||
for(i = 0; i < arr.length; i++) {
|
||||
if(arr[i] == '') continue;
|
||||
if(arr[i].indexOf("Me:") == -1){
|
||||
out += '<div class="card"><div class="card-body"><h6 class="text-muted card-subtitle mb-2">cfcf5b70adee41b91df434291dfa6377<br></h6><p class="card-text">' + joypixels.toImage(decodeURIComponent(arr[i].replaceAll('+',' '))) + '</p></div></div>';
|
||||
}else{
|
||||
var msg = arr[i].replace("Me: ","");
|
||||
out += '<div class="card"><div class="card-body"><h6 class="text-muted card-subtitle mb-2" style="text-align:right;">You<br></h6><p class="card-text" style="text-align:right;">' + joypixels.toImage((decodeURIComponent(msg.replaceAll('+',' ')))) + '</p></div></div>';
|
||||
}
|
||||
}
|
||||
|
||||
var elem = document.getElementById("msgs");
|
||||
elem.innerHTML = out;
|
||||
document.getElementById('end').scrollIntoView();
|
||||
}
|
||||
27
htdocs/assets/js/chat_ruszki.js
Normal file
27
htdocs/assets/js/chat_ruszki.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
d8 = () => { Math.floor(Date.now()/1E3); }
|
||||
|
||||
var fetch_messages = new XMLHttpRequest();
|
||||
var messages_url = window.location.href + ".txt"; // a szerver ezen az url-en várja az automatikus frissítéshez a lekérdezéseket, responsenak csak az üzenetek kellenek
|
||||
var lastMsgID = -1; // a szervernek az ennél nagyobb id-jű üzeneteket kell csak visszadobnia
|
||||
|
||||
setInterval(function(){
|
||||
fetch_messages.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) loadMessages(this.responseText);
|
||||
};
|
||||
fetch_messages.open("GET", url, true);
|
||||
fetch_messages.send();
|
||||
},1000);
|
||||
|
||||
function loadMessages(text) {
|
||||
//let arr = JSON.parse(text);
|
||||
var out = [];
|
||||
var i;
|
||||
for(i = 0; i < arr.length; i++) {
|
||||
out.push(`Message from ${arr[i].sender}: ${arr[i].msg}`);
|
||||
lastMsgID = arr[i].id;
|
||||
}
|
||||
document.getElementById("chat").innerHTML += out.join("<br>");
|
||||
// autoscroll:
|
||||
var elem = document.getElementById('chat');
|
||||
elem.scrollTop = elem.scrollHeight;
|
||||
}
|
||||
2
htdocs/assets/js/jquery.min.js
vendored
Normal file
2
htdocs/assets/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
htdocs/css/bootstrap.min.js
vendored
Normal file
7
htdocs/css/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,23 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">P2P Chat</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="/">Home</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>chat</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/emoji-toolkit@5.0.5/lib/js/joypixels.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emoji-toolkit@5.0.5/extras/css/joypixels.min.css"/>
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="assets/css/Navigation-with-Search.css">
|
||||
<link rel="stylesheet" href="assets/css/styles.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-light navbar-expand-md navigation-clean-search">
|
||||
<div class="container"><a class="navbar-brand" href="/">P2P Chat</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse"
|
||||
id="navcol-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item" role="presentation"><a class="nav-link active" href="/">Home</a></li>
|
||||
<li class="nav-item" role="presentation"></li>
|
||||
<li class="nav-item" role="presentation"></li>
|
||||
</ul>
|
||||
<a class="btn btn-light action-button" role="button" href="/kill" style="background-color: rgb(198,86,86);">Shutdown</a></div>
|
||||
</div>
|
||||
</nav>
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
34
htdocs/home.html
Normal file
34
htdocs/home.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>chat</title>
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="assets/css/Navigation-with-Search.css">
|
||||
<link rel="stylesheet" href="assets/css/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-light navbar-expand-md navigation-clean-search">
|
||||
<div class="container"><a class="navbar-brand" href="#">P2P Chat</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse"
|
||||
id="navcol-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item" role="presentation"><a class="nav-link active" href="#">Home</a></li>
|
||||
<li class="nav-item" role="presentation"></li>
|
||||
<li class="nav-item" role="presentation"></li>
|
||||
</ul>
|
||||
<form class="form-inline mr-auto" target="_self">
|
||||
<div class="form-group"><label for="search-field"></label><input class="form-control search-field" type="search" id="search-field" name="search"></div>
|
||||
</form><a class="btn btn-light action-button" role="button" href="/kill" style="background-color: rgb(198,86,86);">Shutdown</a></div>
|
||||
</div>
|
||||
</nav>
|
||||
<h1>Peers:</h1>
|
||||
<div class="alert alert-warning" role="alert"><span><strong>No peers connected</strong></span></div>
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
47
htdocs/index.html
Normal file
47
htdocs/index.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<title>chat</title>
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="assets/css/Navigation-with-Search.css">
|
||||
<link rel="stylesheet" href="assets/css/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-light navbar-expand-md navigation-clean-search">
|
||||
<div class="container"><a class="navbar-brand" href="/">P2P Chat</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
|
||||
<div class="collapse navbar-collapse"
|
||||
id="navcol-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item" role="presentation"><a class="nav-link active" href="#">Home</a></li>
|
||||
<li class="nav-item" role="presentation"></li>
|
||||
<li class="nav-item" role="presentation"></li>
|
||||
</ul>
|
||||
<form class="form-inline mr-auto" target="_self">
|
||||
<div class="form-group"><label for="search-field"></label><input class="form-control search-field" type="search" id="search-field" name="search"></div>
|
||||
</form><a class="btn btn-light action-button" role="button" href="/kill" style="background-color: rgb(198,86,86);">Shutdown</a></div>
|
||||
</div>
|
||||
</nav>
|
||||
<div></div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="text-muted card-subtitle mb-2">e5d2fafe805923823f4659dfb943ece0<br></h6>
|
||||
<p class="card-text">This is a message</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="text-muted card-subtitle mb-2" style="text-align:right;">e5d2fafe805923823f4659dfb943ece0<br></h6>
|
||||
<p class="card-text" style="text-align:right;">This is another message</p>
|
||||
</div>
|
||||
</div>
|
||||
<form class="form-inline" style="margin: 7px;padding: 7px;position: fixed;bottom: 0;width: 100%;"><textarea class="form-control" style="width: 90%;display: block;"></textarea><input class="form-control" type="text" style="display:none;" value="%s"><button class="btn btn-primary" style="margin: 7px;padding: 7px;display:inline;">Send</button></form>
|
||||
<script
|
||||
src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue