Text im Chat makieren
Markiere ein Text im Chat und füge ihn als Zitate wieder im Chat ein, mit WhatsApp Style
Der hier verwendete Code
<html><head>
<title>Lobby</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
body {background:#222 url('images/background.png'); color:#fff;}
button { background:transparent; color:#fff; }
input, textarea { background:#16181f; border:1px solid #222 !important; color:#fff; }
.input_wrap { background:#1b213159; }
.emo_head { background:#1b2131; color:#fff; }
.background_box { background:#171a23; color:#fff;}
.log2 { background:#23263c00; }
.cclear, .cdate { color:#dbdbdb; }
.my_notice { color:#fff; background:#006699; padding:3px 10px; display:inline-block; line-height:1em; margin-top:2px; border-radius:20px; font-weight:normal; }
.background_chat { background:#191919; }
.add_shadow { box-shadow:0 0 0px 1px #000; }
/* select box color */ /* background of select box */ /* color of sub menu hover */ /* background selected hover */ /* background color of the options */ /* color of sub menu item */
.user { color:#777; }
.chat_system { color:#666; }
/* status color */
/* list icon colors */
.girl { border-color:#ff99ff;}
.nosex { border-color:#ccc; }
/* audio default */
/* .song_title { display:none; }
.audio_progress { background:#fff; }
.audio_ball { background:#666; } */
* { box-sizing:border-box;}html { margin: 0em; padding: 0; height:100%;width:100%; }
body { margin:0; padding: 0; font-family: 'Dosis', Arial, sans-serif; font-size:17px; width:100%; height:100%; font-weight: normal; }
input:focus, textarea:focus, button:focus { outline:0; }img { border:0px; }
ul { margin: 0; padding: 0; list-style:none; }li { list-style:none; }button { border:none; outline: none !important; cursor:pointer; }
textarea, input{ resize:none; font-size:14px; font-family:sans-serif,"trebuchet ms","lucida grande","lucida sans unicode",arial,helvetica,sans-serif; }
input { font-family: 'FontAwesome', sans-serif,'trebuchet ms','lucida grande','lucida sans unicode',arial,helvetica,sans-serif; }
.clear { width:100%; height:1px; clear:both; }
.btable { display:table; table-layout:fixed; width:100%; }
.bcell_mid { display:table-cell; vertical-align:middle; }
.fa { cursor:pointer; }
.bold { font-weight:bold; }
.text_small { font-size:13px; }
.avsex { border:2px solid; }
.username { font-weight:bold; cursor:pointer; }
#main_input { height:38px; width:100%;}
#container_input { padding:4px; }
#content { width:100%; height:100%; padding:0; padding: 0 12px; float:left; font-size:16px; border-radius:100px; }
.chat_input_container { width:100%;}
.td_input { height:100%; display:table-cell; padding:0 3px; }
.input_table { overflow:hidden; display:table; table-layout:fixed; width:100%; height:100%; }
#inside_wrap_chat { height:100%; overflow:hidden; }
#container_show_chat { width: 100%; height: 100%; position:relative; }
#show_chat { width:100%; height:100%; overflow:auto; overflow-x: hidden; }
#wrap_chat { height:100%; width:100%; }
#warp_show_chat { height:78%; overflow:hidden;}
#show_chat ul { width:100%; position:relative; }
.ch_logs {
padding: 10px;
word-wrap: break-word;
display: table;
width: 100%;
table-layout: fixed;
max-width: 100%;
overflow: hidden;
animation: fadein 1s;
border: 1px #1d212d;
border-radius: 4px;
border-style: solid;
margin-top: 5px;
margin-bottom: 5px;
background-color: #18191f00;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.other_logs{ padding:8px; word-wrap: break-word; display:table; width:100%; table-layout:fixed; max-width:100%; overflow:hidden; }
.chat_avatar { display:table-cell; width:36px; vertical-align:top; position:relative; }
.chat_avatar img { height:36px; width:36px; border-radius:50%; display:block; overflow:hidden; cursor:pointer; }
.my_text { display:table-cell; vertical-align:top; padding:0 0 0 6px; position:relative; }
.my_text .username { font-size:16px; }
#show_chat ul { position:absolute; bottom:0; max-height:100%; overflow-y:auto; }
#show_chat li { position:relative; }
.cclear, .spclear { display:table-cell; width:24px; font-size:10px; vertical-align:middle; text-align:center; cursor:pointer; }
.cdate { display:table-cell; width:65px; font-size:10px; vertical-align:middle; text-align:center; }
.cname { display:table-cell; vertical-align:middle; overflow:hidden; }
.cname .username { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat_rank { display:inline-block; width:auto; height:20px; margin:0 2px 0 0; }
/* .emo_chat { margin-bottom:-6px; height:24px; } */
.system { font-size:12px; }
/* line height for elements */
.chat_message { line-height:1.4em; display:inline-block; max-width:100%; }
#global_chat { display:table; width:100%; overflow:hidden;}
#chat_center { display:table-cell; vertical-align:top; overflow:hidden;}
#main_input_extra { width:auto; position:absolute; bottom:0; left:0; z-index:100; padding:3px; display:none; border-radius:5px; max-width:240px; }
.sub_options { width:40px; height:40px; padding:5px; margin:3px; float:left; cursor:pointer; }
.sub_options:hover { padding:0px; transition: all 0.3s; }
.sub_options img { width:100%; height:auto; }
#main_emoticon { width:456px; max-width:100%; height:222px; position:absolute; bottom:0; left:0; z-index:100; display:none; }
.emo_head { width:100%; height:40px; display:table; table-layout:fixed; }
.emo_menu { width:40px; height:100%; cursor:pointer; text-align:center; font-size:18px; display:table-cell; vertical-align:middle; }
.splog { padding:15px 10px; }
.sptext { margin-top:2px; }
.topic_log { background: #1e2025; color: #fff; text-transform:uppercase; }
.bcolor9 { color:#2ba637; }
.bcolor15 { color:#3366ff; }
.my_notice { padding:3px; background-clip:unset; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #0062cc;
border-color: #005cbf;
}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #545b62;
border-color: #4e555b;
}
.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #682ca5;
border-color: #5428a7;
}
.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #117a8b;
border-color: #10707f;
}
.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active {
color: #212529;
background-color: #d39e00;
border-color: #c69500;
}
.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}
.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #bd2130;
border-color: #b21f2d;
}
.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}
.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active {
color: #212529;
background-color: #dae0e5;
border-color: #d3d9df;
}
.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}
.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #1d2124;
border-color: #171a1d;
}
.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #17a2b8;
border-color: #17a2b8;
}
.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active {
color: #212529;
background-color: #ffc107;
border-color: #ffc107;
}
.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
}
.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active {
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #343a40;
border-color: #343a40;
}
.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
/* customizable snowflake styling */
#content, #message_content {
width: 100%;
height:50px !important;
padding: 0;
padding: 0 12px;
float: left;
border: 1px solid red;
font-size: 16px;
border-radius: 100px;
}
.chat_input_container {
width: 100%;
position: absolute !important;
}
*{
margin:0;
padding:0;
}
body{
background:lightgreen;
}
#zitate_message_senden_box{
background:whitesmoke;
display:none;
border-radius:7px;
width:300px;
position:absolute;
z-index:111;
left:calc(50vw - 150px);
margin:100px auto;
padding:5px;
}
#zitate_message_senden_box_close{
cursor:pointer;
height:25px;
width:25px;
position:relative;
top:-20px;
left:300px;
border-radius:50%;
background:white;
border:1px solid rgba(0,0,0,0.4);
text-align:center;
line-height:25px;
font-weight:900;
color:black;
}
#zitate_message_senden_box_close:hover{
background:red;
color:white;
}
#zitate_message_senden_box_close:active{
background:green;
color:white;
}
#zitate_von_wem{
color:#00bfa5;
}
#zitate_von_wem_conti{
top:-20px;
position:relative;
border-left:4px solid #00bfa5;
border-right:4px solid #00bfa5;
border-top:1px solid rgba(0,0,0,0.4);
border-bottom:1px solid rgba(0,0,0,0.4);
border-radius:5px;
margin-bottom:5px;
padding:5px 0 10px 0;
}
#zitate_von_wem_text{
margin-top:4px;
color:black;
}
#zitate_textfeld{
border-top:1px solid rgba(0,0,0,0.4);
border-bottom:1px solid rgba(0,0,0,0.4);
width:100%;
height:50px;
resize:none;
border-radius:5px;
margin-bottom:5px;
}
#zitate_textfeld:focus{
animation:schreiben 2s linear infinite;
}
#zitate_textfeld:focus ~ button{
animation:schreiben 2s linear infinite;
}
@keyframes schreiben{
0%,49%{
border:1px solid #00bfa5;
box-shadow:1px 1px 1px #00bfa5;
}
50%,100%{
border:1px solid #bf00a5;
box-shadow:1px 1px 1px #bf00a5;
}
}
/*
#sende_zitate_ab{
text-align:center;
border-radius:5px;
outline:none;
border:2px solid lightgrey;
height:20px;
border-left:3px solid #00bfa5;
border-right:3px solid #00bfa5;
width:200px;
margin:0 50px;
position:relative;
color: black;
}
*/
#sende_zitate_ab:hover{
background:green;
color:white;
border-top:3px solid #00bfa5;
border-bottom:3px solid #00bfa5;
}
#sende_zitate_ab:active{
background:#00bfa5;
color:white;
}
#zitate_overlay{
display:none;
height:100vh;
width:100vw;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:99;
background:rgba(0,0,0,0.7);
}
/*whats app box input in chat*/
#container_chat .zitate_message_antwort_box{
background:whitesmoke;
border-radius:7px;
width:80vw;
margin:10px auto;
padding:5px;
}
#container_chat .zitate_von_wem{
color:#00bfa5;
}
#container_chat .zitate_von_wem_antwort_conti{
border-left:4px solid #00bfa5;
border-right:4px solid #00bfa5;
border-top:1px solid rgba(0,0,0,0.4);
border-bottom:1px solid rgba(0,0,0,0.4);
border-radius:5px;
margin-bottom:5px;
padding:5px 0 10px 10px;
}
#container_chat .zitate_von_wem_text_antwort{
margin-top:4px;
}
#container_chat .zitat_antwort_versender_text{
padding:5px 10px;
}
.zitate_senden_fa{
width:100%;
font-weight: bold;
box-shadow: none !important;
padding: 0;
text-align:center;
border: none !important;
font-size: 16px;
}
.zitate_senden_fa i{
width: 40px;
height:40px;
display:block;
}
</style>
</head>
<body style="overflow: hidden;">
<div id="global_chat" class="chatheight" style="height: 579px;">
<div id="chat_center" class="background_chat chatheight" style="position: relative; height: 579px;width:100vw">
<div id="container_chat">
<div id="wrap_chat">
<div id="warp_show_chat" style="height: 533px;">
<div id="container_show_chat">
<div id="inside_wrap_chat">
<ul class="background_box" id="show_chat" value="0">
<ul id="chat_logs_container">
<li id="log833379" data="833379" class="ch_logs system">
<div class="chat_avatar" onclick="openAvMenu(this, 'System',2,8, 9);">
<img class="/image/default_system.png">
</div>
<div class="my_text">
<div class="btable">
<div class="cname"><span class="username user">System</span></div>
<div class="cdate">31/01 10:27</div>
<div onclick="deleteLog(833379);" class="cclear"><i class="fa fa-times"></i></div>
</div>
<div class="chat_message chat_system">Melotdy kommt hinein</div>
</div>
</li>
<li id="log833439" data="833439" class="ch_logs public log2">
<div class="chat_avatar" onclick="openAvMenu(this, 'Sepia2',4825,2, 0);">
<img class="avav avsex girl " src="/image/avatar_user4825_1577104569.jpg">
</div>
<div class="my_text">
<div class="btable">
<div class="cname"><img src="/image/avatar_user4825_1577104569.jpg" class="chat_rank" title="Vip"><span class="username bcolor9">Sdggjhepia2</span></div>
<div class="cdate">31/01 16:43</div>
<div onclick="deleteLog(833439);" class="cclear"><i class="fa fa-times"></i></div>
</div>
<div class="chat_message bcolor15">Du hast recht</div>
</div>
</li>
<li id="log833452" data="833452" class="ch_logs public">
<div class="chat_avatar" onclick="openAvMenu(this, '@Lw-10916',10916,0, 0);">
<img class="avav avsex girl " src="/image/default_guest.png">
</div>
<div class="my_text">
<div class="btable">
<div class="cname"><span class="username user">@Lw-10916</span></div>
<div class="cdate">31/01 16:50</div>
<div onclick="deleteLog(833452);" class="cclear"><i class="fa fa-times"></i></div>
</div>
<div class="chat_message ">Ok, dann bis später</div>
</div>
</li>
<li id="log833453" data="833453" class="ch_logs public log2">
<div class="chat_avatar" onclick="openAvMenu(this, 'Sepia2',4825,2, 0);">
<img class="avav avsex girl " src="/image/avatar_user4825_1577104569.jpg">
</div>
<div class="my_text">
<div class="btable">
<div class="cname"><img src="/image/avatar_user4825_1577104569.jpg" class="chat_rank" title="Vip"><span class="username bcolor9">Sepia2</span></div>
<div class="cdate">31/01 16:50</div>
<div onclick="deleteLog(833453);" class="cclear"><i class="fa fa-times"></i></div>
</div>
<div class="chat_message bcolor15">Ja bis später</div>
</div>
</li>
<li id="log833458" data="833458" class="ch_logs system">
<div class="chat_avatar" onclick="openAvMenu(this, 'System',2,8, 9);">
<img class="avav avsex nosex " src="/image/default_system.png">
</div>
<div class="my_text">
<div class="btable">
<div class="cname"><span class="username user">System</span></div>
<div class="cdate">31/01 18:09</div>
<div onclick="deleteLog(833458);" class="cclear"><i class="fa fa-times"></i></div>
</div>
<div class="chat_message chat_system"><span class="my_notice">basti1012</span> kommt hinein</div>
</div>
</li>
<li class="other_logs splog topic_log">
<div class="chat_avatar">
<img src="/image/topic.svg">
</div>
<div class="my_text">
<div class="btable">
<div class="bcell_mid bold sptitle" style="color:red">
FONEX </div>
<div onclick="hideThisPost(this)" ;="" class="spclear">
<i class="fa fa-times"></i>
</div>
</div>
<div class="chat_message text_small sptext">
Ein problem gibt es noch. wenn du das testen tust wirst du sehen das es nur einmal geht weil dann mehr einträge sind und das script njicht mehr geht. da muss ich mir was einfallen lassen wie dein script bestimmte sachen aktuliesiert weil theoretisch müsste jedesmal das script auch neu laden . zumindest dioe eine funktion </div>
</div>
</li>
<li id="log833459" data="833459" class="ch_logs system log2">
<div class="chat_avatar" onclick="openAvMenu(this, 'System',2,8, 9);">
<img class="avav avsex nosex " src="/image/default_system.png">
</div>
<div class="my_text">
<div class="btable">
<div class="cname"><span class="username user">System</span></div>
<div class="cdate">31/01 18:32</div>
<div onclick="deleteLog(833459);" class="cclear"><i class="fa fa-times"></i></div>
</div>
<div class="chat_message chat_system">Hey kommt hinein</div>
</div>
</li>
</ul>
</ul>
</div>
<div value="0" id="main_emoticon" class="background_box">
<div class="emo_head main_emo_head">
<div class="emo_menu" onclick="hideEmoticon();">
<i class="fa fa-window-close"></i>
</div>
</div>
<div id="main_input_extra" class="add_shadow background_box">
<div class="sub_options" onclick="getTextOptions();">
</div>
<div class="sub_options" onclick="getGiphy(1);">
<img src="/image/giphy.svg"></div><div class="sub_options" onclick="getYoutube(1);">
<img src="/image/youtube.svg"></div><div class="sub_options" onclick="paintIt(1);">
<img src="/image/paintit.svg"></div></div>
</div>
<div class="clear"></div>
</div>
<div class="chat_input_container">
<div id="top_chat_container">
<div id="container_input" class="input_wrap">
<form id="main_input" name="chat_data" action="" method="post">
<div class="input_table">
<div id="main_input_box" class="td_input">
<input type="text" name="content" id="content">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="zitate_overlay"></div>
<div id="zitate_message_senden_box">
<div id="zitate_message_senden_box_close">X</div>
<div id="zitate_von_wem_conti">
<span id="zitate_von_wem">Basti1012</span>
<div id="zitate_von_wem_text">
<span id="zitierter_text">Wer den Text lesen kann fummelt gerade in quelltext rum</span>
</div>
</div>
<textarea id="zitate_textfeld" placeholder="Hier deinen antwort Text">