144 lines
6.1 KiB
HTML
144 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>template</title>
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed">
|
||
<style>
|
||
|
||
|
||
body {
|
||
|
||
|
||
background-color: #494949;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
align-content: flex-end;
|
||
|
||
|
||
font-family: "Roboto Condensed", sans-serif;
|
||
font-size: 1em;
|
||
letter-spacing: 0.1px;
|
||
color: lighter;
|
||
text-rendering: optimizeLegibility;
|
||
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
#chatwin {
|
||
/* color: white; */
|
||
height: 100%;
|
||
min-width: 150px;
|
||
max-width: 400px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
|
||
}
|
||
|
||
|
||
.chatRow {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-bottom: 1px;
|
||
animation: fadeInUp 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.nameline {
|
||
color: white;
|
||
padding: 5px;
|
||
width: 25%;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
flex-direction: column;
|
||
vertical-align: auto;
|
||
}
|
||
|
||
.highlight-message {
|
||
color: #ffb6c1 !important; /* Нежно-светло-розовый */
|
||
font-weight: 500;
|
||
}
|
||
|
||
|
||
|
||
.yt {
|
||
background-image: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"><path d="M0 40L40 0H20L0 20M40 40V20L20 40"/></g></svg>');
|
||
background-color: #E53935A0;
|
||
}
|
||
|
||
.tg {
|
||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="evenodd"><g fill="%239C92AC" fill-opacity="0.4"><path opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z"/><path d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z"/></g></g></svg>');
|
||
background-color: #2196F3A0;
|
||
}
|
||
|
||
.tw {
|
||
background-color: #6034b2A0 ;
|
||
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60' viewBox='0 0 20 12'><g fill-rule='evenodd'><g id='charlie-brown' fill='%236441a5' fill-opacity='0.35'><path d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/></g></g></svg>");
|
||
}
|
||
/* <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><rect fill='#6441A5' width='120' height='120'/><polygon fill='#5C3C98' fill-opacity='1' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120 '/></svg> */
|
||
.donate {
|
||
background-image: url('back-coin.jpg');
|
||
/* background-size: 500px; */
|
||
color: black !important;
|
||
}
|
||
|
||
.hello {
|
||
background-color: #00bb77;
|
||
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='59' height='59' viewBox='0 0 120 120'><polygon fill='%23000' fill-opacity='0.11' points='120 0 120 60 90 30 60 0 0 0 0 0 60 60 0 120 60 120 90 90 120 60 120 0'/></svg>");
|
||
}
|
||
|
||
.msgline {
|
||
padding: 5px;
|
||
width: 75%;
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<div id="chatwin">
|
||
<!--
|
||
<div idd="1" class="chatRow">
|
||
<div class="nameline tg">Edvard Force</div>
|
||
<div class="msgline">вот Тенчу Великому зашла , он в ней быстро разобрался и втащил за один стрим )))) ждем когда до нее доберется ))))</div>
|
||
</div>
|
||
<div idd="2" class="chatRow">
|
||
<div class="nameline tg" >Диванный Воин</div>
|
||
<div class="msgline">dc или если ты действительно решишь дать бан то мышкой два клика не сделаешь?</div>
|
||
</div>
|
||
<div idd="3" class="chatRow">
|
||
<div class="nameline tg">Yoshka's Cat</div>
|
||
<div class="msgline">великий ну эта часть ванпис лутьше чем вариорсы надо признать</div>
|
||
</div>
|
||
<div idd="4" class="chatRow">
|
||
<div class="nameline yt">XAOSHammer</div>
|
||
<div class="msgline">Великий а куда друг твой пропал спец по японскому языку ?))))</div>
|
||
</div>
|
||
<div idd="5" class="chatRow">
|
||
<div class="nameline tg">Kino Konformist</div>
|
||
<div class="msgline">вот Тенчу Великому зашла , он в ней быстро разобрался и втащил за один стрим )))) ждем когда до нее доберется ))))</div>
|
||
</div>
|
||
-->
|
||
<div id="anchor"></div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|