rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1 from SillyLossy/ross-css

Browse Source 
New CSS from RossAscends
This commit is contained in:
RossAscends
2023-02-25 05:14:43 +09:00
committed by GitHub
parent a104082943 21198fbad8
commit d8544385ab
4 changed files with 818 additions and 537 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/bg_load.css
View File

@@ -1 +1 @@
#bg1 {background-image: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(../backgrounds/tavern.png);}
#bg1 {background-image: url(../backgrounds/tavern.png);}

211
public/index.html
View File

@@ -1,13 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
<script src="scripts/jquery-3.5.1.min.js"></script>
<script src="scripts/jquery.transit.min.js"></script>
<script src="scripts/jquery-cookie-1.4.1.min.js"></script>
<script src="scripts/showdown.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="css/bg_load.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type=module>
//To DO::
@@ -26,7 +35,7 @@
<script type=module>
import {encode, decode} from "../scripts/gpt-2-3-tokenizer/mod.js";
$(document).ready(function(){
const VERSION = '1.2.8';
const VERSION = '1.2.7';
var converter = new showdown.Converter();
var bg_menu_toggle = false;
var default_user_name = "You";
@@ -38,8 +47,8 @@
is_name: true,
create_date: 0,
mes: '\n*You went inside. The air smelled of fried meat, tobacco and a hint of wine. A dim light was cast by candles, and a fire crackled in the fireplace. It seems to be a very pleasant place. Behind the wooden bar is an elf waitress, she is smiling. Her ears are very pointy, and there is a twinkle in her eye. She wears glasses and a white apron. As soon as she noticed you, she immediately came right up close to you.*\n\n' +
' Hello there! How is your evening going?\n' +
'<img src="img/star_dust_city.png" width=80% style="opacity:0.3; display:block;border-radius:5px;margin-top:25px;margin-bottom:23px; margin-left: 45px;margin-right: auto;">\n<a id="verson" style="color:rgb(229, 224, 216,0.8);" href="https://github.com/TavernAI/TavernAI" target="_blank">@@@TavernAI v'+VERSION+'@@@</a><div id="characloud_url" style="margin-right:10px;margin-top:0px;float:right; height:25px;cursor: pointer;opacity: 0.99;display:inline-block;"><img src="img/cloud_logo.png" style="width: 25px;height: auto;display:inline-block; opacity:0.7;"><div style="vertical-align: top;display:inline-block;">Cloud</div></div><br><br><br><br>'
' "Hello there! How is your evening going?"<br><br>\n' +
'<img src="img/star_dust_city.png" width=80%; display:block;">\n'
}];
var chat_create_date = 0;
@@ -133,11 +142,12 @@
var preset_settings_novel = 'Classic-Krake';
//css
var bg1_toggle = true;
var bg1_toggle = true; // inits the BG as BG1
var css_mes_bg = $('<div class="mes"></div>').css('background');
var css_send_form_display = $('<div id=send_form></div>').css('display');
var colab_ini_step = 1;
setInterval(function() {
switch(colab_ini_step){
case 0:
@@ -194,7 +204,7 @@
is_get_status_novel = false;
}else{
$("#online_status_indicator").css("background-color", "black");
$("#online_status").css("opacity", 0.0);
$("#online_status").css("display", "none");
$("#online_status_text").html("");
$("#online_status_indicator2").css("background-color", "green");
$("#online_status_text2").html(online_status);
@@ -223,7 +233,7 @@
var getVersion = data.version;
if(getVersion !== 'error' && getVersion != undefined){
if(compareVersions(getVersion, VERSION) === 1){
$('#verson').append(' <span style="color: #326d78; font-size: 15px;">(New update @'+getVersion+')</span>');
$('#verson').append(' <span>(v.'+getVersion+')</span>');
}
}
@@ -297,16 +307,16 @@
$("#api_button").css("display", 'inline-block');
}
function printCharaters(){
function printCharacters(){
//console.log(1);
$("#rm_print_charaters_block").empty();
$("#rm_print_characters_block").empty();
characters.forEach(function(item, i, arr) {
var this_avatar = default_avatar;
if(item.avatar != 'none'){
this_avatar = "characters/"+item.avatar+"#"+Date.now();
}
$("#rm_print_charaters_block").prepend('<div class=character_select chid='+i+'><div class=avatar><img src="'+this_avatar+'"></div><div class=ch_name>'+item.name+'</div></div>');
$("#rm_print_characters_block").prepend('<div class=character_select chid='+i+'><div class=avatar><img src="'+this_avatar+'"></div><div class=ch_name>'+item.name+'</div></div>');
//console.log(item.name);
});
@@ -341,7 +351,7 @@
characters.sort((a,b) => a.create_date - b.create_date );
//characters.reverse();
if(this_chid != undefined) $("#avatar_url_pole").val(characters[this_chid].avatar);
printCharaters();
printCharacters();
//console.log(propOwn.length);
//return JSON.parse(getData[0]);
//const getData = await response.json();
@@ -534,7 +544,7 @@
}
messageText = messageFormating(messageText, characterName);
$("#chat").append( "<div class='mes' mesid="+count_view_mes+" ch_name="+characterName+"><div class='for_checkbox'></div><input type='checkbox' class='del_checkbox'><div class=avatar><img src='"+avatarImg+"'></div><div class=mes_block><div class=ch_name>"+characterName+"<div title=Edit class=mes_edit><img src=img/scroll.png style='width:20px;height:20px;'></div><div class=mes_edit_cancel><img src=img/cancel.png></div><div class=mes_edit_done><img src=img/done.png></div></div><div class=mes_text>"+"</div></div></div>" );
$("#chat").append( "<div class='mes' mesid="+count_view_mes+" ch_name="+characterName+"><div class='for_checkbox'></div><input type='checkbox' class='del_checkbox'><div class=avatar><img src='"+avatarImg+"'></div><div class=mes_block><div class=ch_name>"+characterName+"<div title=Edit class=mes_edit></div><div class=mes_edit_cancel><img src=img/cancel.png></div><div class=mes_edit_done><img src=img/done.png></div></div><div class=mes_text>"+"</div></div></div>" );
if(!if_typing_text){
//console.log(messageText);
@@ -600,7 +610,7 @@
//$("#send_textarea").blur();
$( "#send_but" ).css("display", "none");
$( "#loading_mes" ).css("display", "block");
$( "#loading_mes" ).css("display", "inline-block");
var storyString = "";
@@ -835,7 +845,7 @@
is_add_personality = true;
//chatString = chatString.substr(0,chatString.length-1);
//anchorAndPersonality = "[Genre: roleplay chat][Tone: very long messages with descriptions]";
if((anchorTop != "" || charPersonality != "") && !is_pygmalion){
if(anchorTop != "" || charPersonality != ""){
if(anchorTop != "") charPersonality+=' ';
item+="["+charPersonality+anchorTop+']\n';
}
@@ -1021,7 +1031,7 @@
if(is_pygmalion){
if_typing_text = false;
message_already_generated +=getMessage;
if(message_already_generated.indexOf('You:') === -1 && message_already_generated.indexOf('<|endoftext|>') === -1 && tokens_already_generated < parseInt(amount_gen) && getMessage.length > 0){
if(message_already_generated.indexOf('You:') === -1 && tokens_already_generated < parseInt(amount_gen)){
runGenerate(getMessage);
return;
}
@@ -1061,7 +1071,7 @@
getMessage = $.trim(getMessage);
chat[chat.length-1]['mes'] = getMessage;
addOneMessage(chat[chat.length-1]);
$( "#send_but" ).css("display", "block");
$( "#send_but" ).css("display", "inline");
$( "#loading_mes" ).css("display", "none");
saveChat();
}else{
@@ -1069,7 +1079,7 @@
Generate('force_name2');
}
}else{
$( "#send_but" ).css("display", "block");
$( "#send_but" ).css("display", "inline");
$( "#loading_mes" ).css("display", "none");
}
},
@@ -1077,7 +1087,7 @@
$("#send_textarea").removeAttr('disabled');
is_send_press = false;
$( "#send_but" ).css("display", "block");
$( "#send_but" ).css("display", "inline");
$( "#loading_mes" ).css("display", "none");
console.log(exception);
console.log(jqXHR);
@@ -1201,14 +1211,14 @@
});
//menu buttons
var seleced_button_style = { color: "#bcc1c8" };
var selected_button_style = { color: "#bcc1c8" };
var deselected_button_style = { color: "#565d66" };
$( "#rm_button_create" ).children("h2").css(seleced_button_style);
$( "#rm_button_characters" ).children("h2").css(seleced_button_style);
$( "#rm_button_create" ).children("h2").css(selected_button_style);
$( "#rm_button_characters" ).children("h2").css(selected_button_style);
$( "#rm_button_settings" ).click(function() {
selected_button = 'settings';
menu_type = 'settings';
$( "#rm_charaters_block" ).css("display", "none");
$( "#rm_characters_block" ).css("display", "none");
$( "#rm_api_block" ).css("display", "block");
$('#rm_api_block').css('opacity',0.0);
@@ -1223,7 +1233,7 @@
$( "#rm_info_block" ).css("display", "none");
$( "#rm_button_characters" ).children("h2").css(deselected_button_style);
$( "#rm_button_settings" ).children("h2").css(seleced_button_style);
$( "#rm_button_settings" ).children("h2").css(selected_button_style);
$( "#rm_button_selected_ch" ).children("h2").css(deselected_button_style);
});
$( "#rm_button_characters" ).click(function() {
@@ -1251,7 +1261,7 @@
}
}
$( "#rm_charaters_block" ).css("display", "none");
$( "#rm_characters_block" ).css("display", "none");
$( "#rm_api_block" ).css("display", "none");
$( "#rm_ch_create_block" ).css("display", "block");
@@ -1295,9 +1305,9 @@
function select_rm_characters(){
menu_type = 'characters';
$( "#rm_charaters_block" ).css("display", "block");
$('#rm_charaters_block').css('opacity',0.0);
$('#rm_charaters_block').transition({
$( "#rm_characters_block" ).css("display", "block");
$('#rm_characters_block').css('opacity',0.0);
$('#rm_characters_block').transition({
opacity: 1.0,
duration: animation_rm_duration,
easing: animation_rm_easing,
@@ -1308,12 +1318,12 @@
$( "#rm_ch_create_block" ).css("display", "none");
$( "#rm_info_block" ).css("display", "none");
$( "#rm_button_characters" ).children("h2").css(seleced_button_style);
$( "#rm_button_characters" ).children("h2").css(selected_button_style);
$( "#rm_button_settings" ).children("h2").css(deselected_button_style);
$( "#rm_button_selected_ch" ).children("h2").css(deselected_button_style);
}
function select_rm_info(text){
$( "#rm_charaters_block" ).css("display", "none");
$( "#rm_characters_block" ).css("display", "none");
$( "#rm_api_block" ).css("display", "none");
$( "#rm_ch_create_block" ).css("display", "none");
$( "#rm_info_block" ).css("display", "flex");
@@ -1330,7 +1340,7 @@
select_rm_create();
menu_type = 'character_edit';
$( "#delete_button_div" ).css("display", "block");
$( "#rm_button_selected_ch" ).children("h2").css(seleced_button_style);
$( "#rm_button_selected_ch" ).children("h2").css(selected_button_style);
var display_name = characters[chid].name;
$( "#rm_button_selected_ch" ).children("h2").text(display_name);
@@ -1402,16 +1412,16 @@
}
});
$(document).on('click', '.del_checkbox', function(){
$(document).on('click', '.del_checkbox', function(){ //when a checkbox is clicked
$('.del_checkbox').each(function(){
$(this).prop( "checked", false );
$(this).parent().css('background', css_mes_bg);
});
$(this).parent().css('background', "#791b31");
var i = $(this).parent().attr('mesid');
$(this).parent().css('background', "#791b31"); //sets the bg of the selected msg to a muted red
var i = $(this).parent().attr('mesid'); //checks the message ID in the chat
this_del_mes = i;
while(i < chat.length){
$(".mes[mesid='"+i+"']").css('background', "#791b31");
while(i < chat.length){ //as long as the current message ID is less than the total chat length
$(".mes[mesid='"+i+"']").css('background', "#791b31"); //sets the bg of the all msgs BELOW the selected msg to a muted red as well
$(".mes[mesid='"+i+"']").children('.del_checkbox').prop( "checked", true );
i++;
//console.log(i);
@@ -1431,8 +1441,6 @@
$('#logo_block').click(function(event) {
if(!bg_menu_toggle){
$('#bg_menu_button').transition({ perspective: '100px',rotate3d: '1,1,0,180deg'});
//$('#bg_menu_content1').css('display', 'block');
//$('#bg_menu_content1').css('opticary', 0);marginTop: '10px'
$('#bg_menu_content').transition({
opacity: 1.0, height: '90vh',
duration: 340,
@@ -1451,28 +1459,28 @@
});
}
});
$(document).on('click', '.bg_example_img', function(){
var this_bgfile = $(this).attr("bgfile");
$(document).on('click', '.bg_example_img', function(){ //when user clicks on a BG thumbnail...
var this_bgfile = $(this).attr("bgfile"); // this_bgfile = whatever they clicked
if(bg1_toggle == true){
bg1_toggle = false;
var number_bg = 2;
var target_opacity = 1.0;
}else{
bg1_toggle = true;
var number_bg = 1;
var target_opacity = 0.0;
if(bg1_toggle == true){ //if bg1 is toggled true (initially set as true in first JS vars)
bg1_toggle = false; // then toggle it false
var number_bg = 2; // sets a variable for bg2
var target_opacity = 1.0; // target opacity is 100%
}else{ //if bg1 is FALSE
bg1_toggle = true; // make it true
var number_bg = 1; // set variable to bg1..
var target_opacity = 0.0; // set target opacity to 0
}
$('#bg2').stop();
$('#bg2').transition({
opacity: target_opacity,
$('#bg2').stop(); // first, stop whatever BG transition was happening before
$('#bg2').transition({ // start a new BG transition routine
opacity: target_opacity, // set opacity to previously set variable
duration: 1300, //animation_rm_duration,
easing: "linear",
complete: function() {
complete: function() { // why does the BG transition completion make the #options (right nav) invisible?
$("#options").css('display', 'none');
}
});
$('#bg'+number_bg).css('background-image', 'linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url("backgrounds/'+this_bgfile+'")');
$('#bg'+number_bg).css('background-image', 'url("backgrounds/'+this_bgfile+'")');
setBackground(this_bgfile);
});
@@ -1595,8 +1603,8 @@
processData: false,
success: function(html){
setBackground(html);
if(bg1_toggle == true){
bg1_toggle = false;
if(bg1_toggle == true){ // this is a repeat of the background setting function for when user uploads a new BG image
bg1_toggle = false; // should make the Bg setting a modular function to be called in both cases
var number_bg = 2;
var target_opacity = 1.0;
}else{
@@ -1612,7 +1620,7 @@
$("#options").css('display', 'none');
}
});
$('#bg'+number_bg).css('background-image', 'linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url('+e.target.result+')');
$('#bg'+number_bg).css('background-image', 'url('+e.target.result+')');
$("#form_bg_download").after("<div class=bg_example><img bgfile='"+html+"' class=bg_example_img src='backgrounds/"+html+"'><img bgfile='"+html+"' class=bg_example_cross src=img/cross.png></div>");
},
error: function (jqXHR, exception) {
@@ -1858,7 +1866,7 @@
}
});
$( "body" ).click(function() {
$( "body" ).click(function() { // is this supposed to make the rightnav disappear when user clicks the main body while rightnav is displayed?
if($("#options").css('opacity') == 1.0){
$('#options').transition({
opacity: 0.0,
@@ -1903,6 +1911,7 @@
Generate('regenerate');
}
});
// this function hides the input form, and shows the delete/cancel buttons fro deleting messages from chat
$( "#option_delete_mes" ).click(function() {
if(this_chid != undefined && !is_send_press){
$('#dialogue_del_mes').css('display','block');
@@ -1915,6 +1924,7 @@
});
}
});
//functionality for the cancel delete messages button, reverts to normal display of input form
$( "#dialogue_del_mes_cancel" ).click(function() {
$('#dialogue_del_mes').css('display','none');
$('#send_form').css('display',css_send_form_display);
@@ -1928,6 +1938,7 @@
this_del_mes = 0;
});
//confirms message delation with the "ok" button
$( "#dialogue_del_mes_ok" ).click(function() {
$('#dialogue_del_mes').css('display','none');
$('#send_form').css('display',css_send_form_display);
@@ -2512,7 +2523,7 @@
if(mes.length > strlen){
mes = '...'+mes.substring(mes.length - strlen);
}
$('#select_chat_div').append('<div class="select_chat_block" file_name="'+data[key]['file_name']+'"><div class=avatar><img src="characters/'+characters[this_chid]['avatar']+'" style="width: 33px; height: 51px;"></div><div class="select_chat_block_filename">'+data[key]['file_name']+'</div><div class="select_chat_block_mes">'+mes+'</div></div>');
$('#select_chat_div').append('<div class="select_chat_block" file_name="'+data[key]['file_name']+'"><div class=avatar><img src="characters/'+characters[this_chid]['avatar']+'" style="width: 33px;"></div><div class="select_chat_block_filename">'+data[key]['file_name']+'</div><div class="select_chat_block_mes">'+mes+'</div></div>');
if(characters[this_chid]['chat'] == data[key]['file_name'].replace('.jsonl', '')){
//children().last()
$('#select_chat_div').children(':nth-last-child(1)').attr('highlight', true);
@@ -2773,12 +2784,9 @@
<title>Tavern.AI</title>
</head>
<body>
<!--<p class="customfont">Hello world!</p>-->
<!--<div style="cursor: pointer;opacity: 0.1;"><img src="img/donut.png" style="width: 25px;height: 25px;bottom: 2px;left: 2px;position: absolute; "><div style="position: absolute; bottom: 6px;left: 28px;"><h4 style="margin-bottom: 0px"><i>Donuts</i></h4></div></div>-->
<div id="bg1"></div>
<div id="bg2"></div>
<div id="top-bar"></div>
<div id="shadow_popup">
<div id="dialogue_popup">
@@ -2859,7 +2867,8 @@
<img id="tips_cross" src="img/cross.png" style="position: absolute; margin-left: 230px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
<img src="img/love.png" style="width: 45px;height: 45px; margin-bottom: 0px; opacity: 0.6;">
<div style="margin-top:20px; margin-left: 20px; margin-right: 20px; margin-bottom: 15px;"><u>TavernAI</u> is being developed with love and care on a voluntary basis. If you like the project and want to support it, your donation would make a huge impact! <u>Thank you!</u></div>
<div style="margin-top:20px; margin-left: 20px; margin-right: 20px; margin-bottom: 15px;">
<u>TavernAI</u> is being developed with love and care on a voluntary basis. If you like the project and want to support it, your donation would make a huge impact! <u>Thank you!</u></div>
<img src="img/eth_icon.png" style="width: 35px;height: 35px; margin-bottom: 0px; opacity: 0.6;">
<img src="img/usdt.png" style="width: 35px;height: 35px; margin-bottom: 0px; opacity: 0.6;">
<div id="tips_text"><h3 style="margin-top: 0px; opacity: 0.8">Ethereum or USDT</h3></div>
@@ -2870,7 +2879,17 @@
</div>
</div>
<div id="bg_menu">
<div id="logo_block"><div id="bg_menu_button"><img src="img/tri.png"></div><img src="img/logo.png" id="site_logo"></div>
<div id="logo_block"><div id="bg_menu_button"><img src="img/tri.png"></div><img src="img/logo.png" id="site_logo">
<!-- derp derp derp -->
<div id="update-notification">
<a id="verson" href="https://github.com/TavernAI/TavernAI" target="_blank"></a>
</div>
<!-- derp derp derp derp -->
</div>
<div id="bg_menu_content">
<form id="form_bg_download" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<label class="input-file">
@@ -2902,7 +2921,16 @@
<input id="character_name_pole" name="ch_name" class="text_pole" maxlength="120" size="35" value="" autocomplete="off">
</div>
<div id="avatar_div" class="avatar_div">
<div id="avatar_div_div" class="avatar"><img id="avatar_load_preview" src="img/fluffy.png" alt="avatar"></div><input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
<div id="avatar_div_div" class="avatar">
<img id="avatar_load_preview" src="img/fluffy.png" alt="avatar">
</div>
<label id="add_avatar_button">
<input type="file" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
Change Avatar
</label>
</div>
@@ -2945,7 +2973,7 @@
<div id="rm_api_block" class="right_menu" >
<h3 id="title_api">API</h3>
<select id="main_api" style="color:#fff;background-color:#13152c;" >
<select id="main_api" >
<option value="kobold">KoboldAI</option>
<option value="novel">NovelAI</option>
</select>
@@ -2959,7 +2987,7 @@
<img id="api_loading" src="img/load.svg" >
</form>
<div id="online_status2">
<div id="online_status_indicator2"></div><div id="online_status_text2">No connection...</div>
<div id="online_status_indicator2"></div><div id="online_status_text2">Not connected</div>
</div>
<h4>Preset settings</h4><h5>Selecting settings (<a href="/notes/4" target="_blank">?</a>)</h5>
<select id="settings_perset">
@@ -3044,16 +3072,22 @@
</div>
</div>
</div>
<div id="rm_charater_import" class="right_menu" style="display: none;">
<div id="rm_character_import" class="right_menu" style="display: none;">
<form id="form_import" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input type="file" id="character_import_file" accept=".json, image/png" name="avatar">
<input id="character_import_file_type" name="file_type" class="text_pole" maxlength="999" size="2" value="" autocomplete="off">
</form>
</div>
<div id="rm_charaters_block" class="right_menu">
<div id="rm_button_create" class="right_menu_button"><h2>+</h2></div>
<div id="rm_characters_block" class="right_menu">
<div id="rm_button_create" class="right_menu_button"><h2>+New Character</h2></div>
<div id="character_import_button" class="right_menu_button"><h2>+Import</h2></div>
<div id="rm_print_charaters_block"></div>
<div id="characloud_url" title="Find more characters on CharaCloud (coming soon)">
<img src="img/cloud_logo.png">
</div>
<div id="rm_print_characters_block"></div>
</div>
<div id="rm_info_block" class="right_menu">
<div id="rm_info_panel">
@@ -3066,37 +3100,52 @@
<div id="sheld">
<div id="chat"></div>
<div id="form_sheld">
<div id="dialogue_del_mes">
<div id="dialogue_del_mes_text"><h3></h3></div>
<div id="dialogue_del_mes_ok" class="menu_button">Delete</div>
<div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
</div>
<form id="send_form">
<div id="options_button">
<div id="options">
<div class="options-content">
<a id="option_start_new_chat"><img src="img/save_and_start_new_chat.png" width="20" height="20">Start new chat</a>
<a id="option_select_chat"><img src="img/book6.png" width="20" height="20" style="opacity: 0.0;"><img src="img/book6.png" style="width: 21px;height: 21px;position: absolute;top: 59px;left: 15px; opacity: 0.5;">Select chats</a><!--<img src="img/book6.png" style="width: 21px;height: 21px;position: absolute;top: 14px;left: 16px; opacity: 0.5;">Select chat</a>-->
<hr>
<a id="option_delete_mes"><img src="img/del_mes.png" width="20" height="20">Delete message</a>
<a id="option_regenerate"><img src="img/regenerate.png" width="20" height="20">Regenerate</a>
</div>
</div>
</div>
<!-- <div contenteditable="true" id="send_textarea">Type a message...</div> -->
<textarea id="send_textarea" placeholder="Type a message..." name="text"></textarea>
<div id="send_but_sheld"><div id="loading_mes"></div><input id="send_but" type="button"></div>
</form>
<script type="text/javascript">
$('#send_textarea').on('input', function () {
this.style.height = '40px';
this.style.height =
(this.scrollHeight) + 'px';
});
</script>
<div id="send_but_sheld">
<div id="loading_mes"></div>
<div id="online_status">
<div id="online_status_indicator"></div>
<div id="online_status_text">Not connected</div>
</div>
<input id="send_but" type="button">
</div>
</form>
<!-- <div id="online_status">
<div id="online_status_indicator"></div><div id="online_status_text">No connection...</div>
</div> -->
</div>
</div>
</div>
</body>
</html>

1044
public/style.css
View File

File diff suppressed because it is too large Load Diff

2
server.js
View File

@@ -608,7 +608,7 @@ app.post("/setbackground", jsonParser, function(request, response){
//const data = request.body;
//console.log(request);
//console.log(1);
var bg = "#bg1 {background-image: linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url(../backgrounds/"+request.body.bg+");}";
var bg = "#bg1 {background-image: url(../backgrounds/"+request.body.bg+");}";
fs.writeFile('public/css/bg_load.css', bg, 'utf8', function(err) {
if(err) {
response.send(err);