<div id="message_chat">
<div class="top-bar">
<div class="top-bar_time">
<p class="time">10:34 <img src="img/top-bar/top-bar_time/location-arrow.svg" alt=""></p>
</div>
<div class="top-bar_indicators">
<div class="item"><img src="img/top-bar/top-bar_indicators/net-arrow.svg" alt=""></div>
<div class="item"><img src="img/top-bar/top-bar_indicators/wifi-arrow.svg" alt=""></div>
<div class="item"><img src="img/top-bar/top-bar_indicators/battery-arrow.svg" alt=""></div>
</div>
</div>
<div class="message_content-bar">
<div class="message-wrapper">
<a class="message-to-you">ogfjgfhgfhgfhhf</a>
<a class="message-to-you">fdhgfhh</a>
<a class="message-to-your">fdfddghghfgdhhp</a>
<a class="message-to-you">gfhfghfgfgfgfgfgfgfgfgfgfgfgfgfgfgfggfhfghfgfgfgfgfgfgfgfgfgfgfgfgfgfgfg</a>
<a class="message-to-your">ogfjgfhdfgfdgfghfghgfhgjgfhgfhhf</a>
<a class="message-to-your">ogfjgfhgfhgfhhf</a>
<a class="message-to-you-img">ФОТО</a>
<a class="message-to-you">gfgfhhgfh</a>
<a class="message-to-your-img">ФОТО</a>
</div>
</div>
<div class="input_wrapper">
<div class="input-line">
<a href="#" class="input-line_camera"><i class="fas fa-camera"></i></a>
<div class="input-line_chat">
<input type="search" class="chat" placeholder="iMessage" onclick="openApp('chat-keyboard')">
<a href="#" class="chat-voice"><i class="fas fa-microphone-alt"></i></a>
<a href="#" class="chat-send"><i class="fas fa-arrow-up"></i></a>
</div>
</div>
<div id="chat-keyboard">
<div class="keyboard-content">
<div class="key" id="key">
<a href="#" class="key-item letter">й</a>
<a href="#" class="key-item letter">ц</a>
<a href="#" class="key-item letter">у</a>
<a href="#" class="key-item letter">к</a>
<a href="#" class="key-item letter">е</a>
<a href="#" class="key-item letter">н</a>
<a href="#" class="key-item letter">г</a>
<a href="#" class="key-item letter">ш</a>
<a href="#" class="key-item letter">щ</a>
<a href="#" class="key-item letter">з</a>
<a href="#" class="key-item letter">х</a>
<a href="#" class="key-item letter">ф</a>
<a href="#" class="key-item letter">ы</a>
<a href="#" class="key-item letter">в</a>
<a href="#" class="key-item letter">а</a>
<a href="#" class="key-item letter">п</a>
<a href="#" class="key-item letter">р</a>
<a href="#" class="key-item letter">о</a>
<a href="#" class="key-item letter">л</a>
<a href="#" class="key-item letter">д</a>
<a href="#" class="key-item letter">ж</a>
<a href="#" class="key-item letter">э</a>
<a href="#" class="key-item shift">↥</a>
<a href="#" class="key-item letter">я</a>
<a href="#" class="key-item letter">ч</a>
<a href="#" class="key-item letter">с</a>
<a href="#" class="key-item letter">м</a>
<a href="#" class="key-item letter">и</a>
<a href="#" class="key-item letter">т</a>
<a href="#" class="key-item letter">ь</a>
<a href="#" class="key-item letter">б</a>
<a href="#" class="key-item letter">ю</a>
<a href="#" class="key-item"><i class="fas fa-backspace"></i></a>
</div>
<div class="bottom-key">
<a href="#" class="key-item">123</a>
<a href="#" class="key-item"><i class="far fa-smile"></i></a>
<a href="#" class="key-item">Пробел</a>
<a href="#" class="key-item">Ввод</a>
</div>
</div>
<div class="bottom-btn">
<a href="#" class="world"><img src="img/chat/globe.svg" alt=""></a>
<a href="#" class="microphone"><img src="img/chat/keyboard-voice.svg" alt=""></a>
</div>
</div>
</div>
</div>
*,
*::after,
*::before {
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 0;
}
body {
font-family: sans-serif;
color: black;
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
a {
text-decoration: none;
}
.top-bar {
width: 100%;
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
transition: 0.3s;
cursor: pointer;
user-select: none;
}
.top-bar:hover {
background-color: rgba(255, 255, 255, 0.42);
transition: 0.5s;
}
.top-bar_time p.time {
font-size: 18px;
color: black;
}
.top-bar_indicators {
display: flex;
justify-content: space-between;
}
.top-bar_indicators .item {
padding-right: 5px;
}
#message_chat {
width: 414px;
height: 896px;
background-color: #fff;
right: 0;
bottom: 0;
z-index: 99;
position: absolute;
user-select: none;
}
#message_chat .top-bar:hover {
background-color: rgba(160, 158, 158, 0.185);
transition: 0.5s;
}
.input-line {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
margin-bottom: 10px;
}
.input-line_chat {
width: 100%;
display: flex;
align-items: center;
margin-left: 10px;
height: 40px;
border: 2px solid #c2c2c2;
border-radius: 20px;
}
.input-line_chat input.chat {
border: none;
outline: none;
padding: 0 20px;
border-radius: 15px;
width: 84%;
color: rgba(0, 0, 0, 0.3);
font-size: 16px;
}
a.input-line_camera {
color: rgba(0, 0, 0, 0.4);
font-size: 38px;
}
a.input-line_camera:hover {
color: rgba(97, 97, 97, 0.4);
transition: 0.3s;
}
a.chat-voice {
background-color: rgba(196, 196, 196, 0.46);
}
a.chat-voice:hover {
background-color: rgba(196, 196, 196);
}
.input-line_chat a {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 16px;
font-size: 18px;
color: white;
margin-right: 3px;
}
a.chat-send {
background-color: rgba(109, 211, 119, 0.46);
}
a.chat-send:hover {
background-color: rgba(109, 211, 119);
}
.message_content-bar {
height: 55.5%;
overflow: auto;
user-select: text;
padding: 0 10px;
}
.message-wrapper {
display: flex;
flex-direction: column;
width: 100%;
font-size: 14px;
}
.message-to-your-img {
align-self: flex-end;
}
.message-to-you-img,
.message-to-your-img {
display: flex;
align-items: center;
justify-content: center;
width: 158px;
height: 140px;
background-color: #c4c4c4;
cursor: pointer;
border-radius: 9px;
}
.message-to-you-img img,
.message-to-your-img img {
display: block;
width: 100%;
height: 100%;
background-size: 100%;
}
.message-to-you {
height: 100%;
width: fit-content;
padding: 7px;
border-radius: 9px;
background-color: #c4c4c4;
margin-top: 10px;
word-wrap: break-word;
max-width: 50%;
}
.message-to-your {
width: fit-content;
padding: 7px;
border-radius: 9px;
background-color: #c4c4c4;
margin-top: 10px;
word-wrap: break-word;
align-self: flex-end;
max-width: 50%;
height: 100%;
}
.input_wrapper {
width: 100%;
position: absolute;
bottom: 0;
}
.new-message {
background-color: rgba(196, 196, 196, 0.46);
width: 100%;
padding: 24px 0;
display: flex;
align-items: center;
justify-content: flex-end;
border-radius: 8px 8px 0px 0px;
}
.new-message p {
font-size: 16px;
padding-right: 60px;
}
.new-message a {
font-size: 13px;
color: #0a93ce;
padding-right: 14px;
}
.new-message a:hover {
color: #10b7ff;
transition: 0.3s;
}
.to-message {
width: 100%;
height: 45px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.to-message a {
padding-right: 10px;
}
.to-message p {
padding-left: 20px;
font-size: 15px;
color: rgba(0, 0, 0, 0.4);
}
.to-message p span {
color: black;
}
.to-message::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: #c4c4c4;
top: 0;
}
.to-message::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: #c4c4c4;
bottom: 0;
}
#chat-keyboard {
width: 100%;
padding: 10px;
background-color: #dadada;
}
.bottom-btn {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.bottom-key {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.key {
display: grid;
grid-template-areas:
"a a a a a a a a a a a"
"a a a a a a a a a a a"
"a a a a a a a a a a a";
justify-content: space-between;
}
.key .key-item {
margin-bottom: 10px;
}
.key .key-item:last-child {
background-color: #c4c4c4;
}
.bottom-key .key-item:nth-child(1) {
width: 46px;
height: 41px;
background-color: #c4c4c4;
}
.bottom-key .key-item:nth-child(2) {
width: 44px;
height: 41px;
background-color: #c4c4c4;
}
.bottom-key .key-item:nth-child(3) {
width: 200px;
height: 41px;
}
.bottom-key .key-item:nth-child(4) {
width: 79px;
height: 41px;
background-color: #c4c4c4;
}
.key-item {
display: flex;
align-items: center;
justify-content: center;
width: 31px;
height: 50px;
font-size: 18px;
box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.25);
background-color: #fff;
border-radius: 4px;
color: black;
}
.key-item:hover {
color: #565656;
transition: 0.3s;
}
.key-item:active,
.shift.active {
color: #424242;
background: #c4c4c4;
transition: 0.3s;
box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.15);
}
.shift {
font-weight: bold;
}
const shiftKey = {
elem: document.querySelector('.shift'),
state: false,
};
const letters = document.querySelectorAll('.letter');
function changeCase() {
if(!shiftKey.state) {
shiftKey.state = true;
shiftKey.elem.classList.add("active");
letters.forEach(item => item.textContent = item.textContent.toUpperCase());
} else {
shiftKey.state = false
shiftKey.elem.classList.remove("active");
letters.forEach(item => item.textContent = item.textContent.toLowerCase());
}
}
shiftKey.elem.addEventListener("click", changeCase)
This Pen doesn't use any external CSS resources.