mirror of https://github.com/PiyushXCoder/lupt.git
fixes
This commit is contained in:
parent
65ecc030b8
commit
46eced24ce
|
|
@ -6,36 +6,6 @@
|
||||||
src: url("../img/Itim-Regular.ttf");
|
src: url("../img/Itim-Regular.ttf");
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
|
||||||
--bg-color: #ffffff;
|
|
||||||
--bg-secondary-color: #f3f3f6;
|
|
||||||
--bg-tertiary-color: #cacad8;
|
|
||||||
--color-primary: #14854F;
|
|
||||||
--color-lightGrey: #d2d6dd;
|
|
||||||
--color-border: #d2d6dd;
|
|
||||||
--color-grey: #747681;
|
|
||||||
--color-darkGrey: #3f4144;
|
|
||||||
--color-error: #d43939;
|
|
||||||
--color-success: #28bd14;
|
|
||||||
--grid-maxWidth: 120rem;
|
|
||||||
--grid-gutter: 2rem;
|
|
||||||
--font-size: 1.8rem;
|
|
||||||
--font-color: #333333;
|
|
||||||
--font-family-sans: "Itim";
|
|
||||||
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
|
|
||||||
|
|
||||||
--msg-other-bg-color : rgb(97, 182, 238);
|
|
||||||
--msg-me-bg-color : rgb(92, 175, 148);
|
|
||||||
--msg-reply-bg-color : rgb(209, 215, 219);
|
|
||||||
--msg-other-border-color : rgb(62, 127, 212);
|
|
||||||
--msg-me-border-color : rgb(64, 148, 116);
|
|
||||||
--msg-reply-border-color : rgb(94, 100, 105);
|
|
||||||
--msg-other-border-sel-color : rgb(58, 90, 139);
|
|
||||||
--msg-me-border-sel-color : rgb(48, 105, 86);
|
|
||||||
|
|
||||||
--svg-filter: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
scrollbar-width: auto;
|
scrollbar-width: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -262,9 +232,7 @@ input {
|
||||||
}
|
}
|
||||||
|
|
||||||
.clip-win.selected-clip {
|
.clip-win.selected-clip {
|
||||||
width: fit-content;
|
|
||||||
min-width: 250px;
|
min-width: 250px;
|
||||||
height: fit-content;
|
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,43 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-color: #ffffff;
|
||||||
|
--bg-secondary-color: #f3f3f6;
|
||||||
|
--bg-tertiary-color: #cacad8;
|
||||||
|
--color-primary: #14854F;
|
||||||
|
--color-lightGrey: #d2d6dd;
|
||||||
|
--color-border: #d2d6dd;
|
||||||
|
--color-grey: #747681;
|
||||||
|
--color-darkGrey: #3f4144;
|
||||||
|
--color-error: #d43939;
|
||||||
|
--color-success: #28bd14;
|
||||||
|
--grid-maxWidth: 120rem;
|
||||||
|
--grid-gutter: 2rem;
|
||||||
|
--font-size: 1.8rem;
|
||||||
|
--font-color: #333333;
|
||||||
|
--font-family-sans: "Itim";
|
||||||
|
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
|
||||||
|
|
||||||
|
--msg-other-bg-color : rgb(97, 182, 238);
|
||||||
|
--msg-me-bg-color : rgb(92, 175, 148);
|
||||||
|
--msg-reply-bg-color : rgb(209, 215, 219);
|
||||||
|
--msg-other-border-color : rgb(62, 127, 212);
|
||||||
|
--msg-me-border-color : rgb(64, 148, 116);
|
||||||
|
--msg-reply-border-color : rgb(94, 100, 105);
|
||||||
|
--msg-other-border-sel-color : rgb(58, 90, 139);
|
||||||
|
--msg-me-border-sel-color : rgb(48, 105, 86);
|
||||||
|
|
||||||
|
--svg-filter: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<title>Lupt Chat</title>
|
<title>Lupt Chat</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="progress" class="bg-sec" style="z-index: 9999; position: fixed; top: 0; bottom: 0;width: 100%; height: 100%;">
|
<div id="progress"
|
||||||
|
style="z-index: 9999; position: fixed; top: 0; bottom: 0;
|
||||||
|
width: 100%; height: 100%; background-color: var(--bg-secondary-color);">
|
||||||
<div style="top: 50%;
|
<div style="top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width:10em;
|
width:10em;
|
||||||
|
|
@ -18,7 +51,8 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
">
|
">
|
||||||
<img src="img/loading.svg" style="height: 100%;">
|
<img src="img/loading.svg" style="height: 100%;">
|
||||||
<button id="progress_button" class="button is-hidden" onclick="leave()">Close</button>
|
<div id="initerror"></div>
|
||||||
|
<button id="progress_button" class="button" style="display: none;" onclick="leave()">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Connect Screen -->
|
<!-- Connect Screen -->
|
||||||
|
|
|
||||||
|
|
@ -15,10 +15,13 @@ var vayakti = {};
|
||||||
var typing = [];
|
var typing = [];
|
||||||
var no_name_message = false;
|
var no_name_message = false;
|
||||||
|
|
||||||
// Connection opened
|
// check if support ws
|
||||||
socket.addEventListener('open', function (event) {
|
if(!('WebSocket' in window || 'MozWebSocket' in window)) {
|
||||||
$('#progress_button').removeClass('is-hidden');
|
$('initerror').text('Warning: Web Browser dosen\'t support websocket! Upgrade');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Connection opened
|
||||||
|
socket.onopen = function(event) {
|
||||||
var params = window.location.search;
|
var params = window.location.search;
|
||||||
params = params.substr(1,params.length).split('&');
|
params = params.substr(1,params.length).split('&');
|
||||||
|
|
||||||
|
|
@ -31,12 +34,18 @@ socket.addEventListener('open', function (event) {
|
||||||
frm.find('[name=kaksh_kunjika]').val(params[0]);
|
frm.find('[name=kaksh_kunjika]').val(params[0]);
|
||||||
frm.find('[name=kunjika]').val(params[1]);
|
frm.find('[name=kunjika]').val(params[1]);
|
||||||
frm.find('[name=name]').val(params[2]);
|
frm.find('[name=name]').val(params[2]);
|
||||||
|
$('#progress_button').css('display', '');
|
||||||
connect(frm);
|
connect(frm);
|
||||||
});
|
}
|
||||||
|
|
||||||
|
// Connection fail
|
||||||
|
socket.onerror = function(event) {
|
||||||
|
$('initerror').text('Warning: Failed to connect websocket! Refresh the '+
|
||||||
|
'page and if still don\'t work upgrade Web Browser');
|
||||||
|
}
|
||||||
|
|
||||||
// Listen for messages
|
// Listen for messages
|
||||||
socket.addEventListener('message', function (event) {
|
socket.onmessage = function(event) {
|
||||||
var j = JSON.parse(event.data);
|
var j = JSON.parse(event.data);
|
||||||
switch(j.cmd) {
|
switch(j.cmd) {
|
||||||
case 'resp':
|
case 'resp':
|
||||||
|
|
@ -100,13 +109,13 @@ socket.addEventListener('message', function (event) {
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
function connect(frm) {
|
function connect(frm) {
|
||||||
if(actions.has_key('join') || actions.has_key('leave')) return;
|
if(actions.has_key('join') || actions.has_key('leave')) return;
|
||||||
var frm = $(frm);
|
var frm = $(frm);
|
||||||
var data = {};
|
var data = {};
|
||||||
frm.serializeArray().forEach(el => {
|
frm.serializeArray().forEach(function(el) {
|
||||||
if(typeof el.value == 'string')
|
if(typeof el.value == 'string')
|
||||||
data[el.name] = el.value.trim();
|
data[el.name] = el.value.trim();
|
||||||
else
|
else
|
||||||
|
|
@ -204,7 +213,7 @@ function changeColor() {
|
||||||
function refreshVayaktiList() {
|
function refreshVayaktiList() {
|
||||||
var v = $('#vayakti_list');
|
var v = $('#vayakti_list');
|
||||||
v.empty();
|
v.empty();
|
||||||
Object.keys(vayakti).forEach((key) => {
|
Object.keys(vayakti).forEach(function(key) {
|
||||||
v.append($('<tr>')
|
v.append($('<tr>')
|
||||||
.append($('<td>').append(vayakti[key]))
|
.append($('<td>').append(vayakti[key]))
|
||||||
.append($('<td>').append(key)));
|
.append($('<td>').append(key)));
|
||||||
|
|
@ -216,6 +225,6 @@ function autosize(el){
|
||||||
el.style.cssText = 'height:auto; padding:0';
|
el.style.cssText = 'height:auto; padding:0';
|
||||||
el.style.cssText = 'height:' + el.scrollHeight + 'px';
|
el.style.cssText = 'height:' + el.scrollHeight + 'px';
|
||||||
$('#reply_clip').css('bottom', (el.scrollHeight + 10) + 'px');
|
$('#reply_clip').css('bottom', (el.scrollHeight + 10) + 'px');
|
||||||
$('#selected_clip').css('bottom', (el.scrollHeight + 10) + 'px');
|
$('#selected_clip').css('bottom', (el.scrollHeight + 25) + 'px');
|
||||||
},0);
|
},0);
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
var Camera = class {
|
var Camera = class {
|
||||||
static setupCamera() {
|
static setupCamera() {
|
||||||
$('#file-input')[0].addEventListener('change', (e) => {
|
$('#file-input')[0].addEventListener('change', function(e) {
|
||||||
const file = e.target.files[0];
|
const file = e.target.files[0];
|
||||||
if (!file) {
|
if (!file) {
|
||||||
return;
|
return;
|
||||||
|
|
@ -19,11 +19,14 @@ var Camera = class {
|
||||||
reader.readAsDataURL(result);
|
reader.readAsDataURL(result);
|
||||||
reader.onloadend = function() {
|
reader.onloadend = function() {
|
||||||
var base64data = reader.result;
|
var base64data = reader.result;
|
||||||
if(base64data.length > 63000 && mime != 'image/jpeg') {
|
if(base64data.length > 63488 && mime != 'image/jpeg') {
|
||||||
base64data = null;
|
base64data = null;
|
||||||
result = null;
|
result = null;
|
||||||
Camera.compressImage(file, 0.7, 'image/jpeg');
|
Camera.compressImage(file, 0.7, 'image/jpeg');
|
||||||
return;
|
return;
|
||||||
|
} else if(base64data.length > 63488 && mime == 'image/jpeg') {
|
||||||
|
window.alert('file is too large!');
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
socket.send(JSON.stringify({
|
socket.send(JSON.stringify({
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ let Messages = class {
|
||||||
var elm = $(elm);
|
var elm = $(elm);
|
||||||
elm.toggleClass('active');
|
elm.toggleClass('active');
|
||||||
|
|
||||||
if($('.active').length == 0)
|
if($('.message.active').length == 0)
|
||||||
$('#selected_clip').addClass('is-hidden');
|
$('#selected_clip').addClass('is-hidden');
|
||||||
else
|
else
|
||||||
$('#selected_clip').removeClass('is-hidden');
|
$('#selected_clip').removeClass('is-hidden');
|
||||||
|
|
@ -49,7 +49,7 @@ let Messages = class {
|
||||||
if(elm.length > 0) elm.remove();
|
if(elm.length > 0) elm.remove();
|
||||||
if(typing.length == 0) return;
|
if(typing.length == 0) return;
|
||||||
var text = '';
|
var text = '';
|
||||||
typing.forEach((val) => {
|
typing.forEach(function(val) {
|
||||||
var name = vayakti[val];
|
var name = vayakti[val];
|
||||||
if(name == undefined) name = "";
|
if(name == undefined) name = "";
|
||||||
text += name+'('+val.substr(0,8)+')'+ ','
|
text += name+'('+val.substr(0,8)+')'+ ','
|
||||||
|
|
@ -98,7 +98,7 @@ let Messages = class {
|
||||||
else
|
else
|
||||||
elm.append($('<div>', {class: 'message-by'}).append(vayakti[sender]+'('+sender.substr(0, 8)+')'))
|
elm.append($('<div>', {class: 'message-by'}).append(vayakti[sender]+'('+sender.substr(0, 8)+')'))
|
||||||
}
|
}
|
||||||
elm.append($('<img>', {src: src}));
|
elm.append($('<img>', {src: src, width: 300}));
|
||||||
elm.click(function() {
|
elm.click(function() {
|
||||||
Messages.pick(this);
|
Messages.pick(this);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').match
|
||||||
$('body').toggleClass('dark');
|
$('body').toggleClass('dark');
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(() => {
|
$(document).ready(function() {
|
||||||
|
|
||||||
$(".tabs > a").click(function() {
|
$(".tabs > a").click(function() {
|
||||||
var t = $(this);
|
var t = $(this);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue