-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
65 lines (65 loc) · 5.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="ru">
<head>
<title>🥳 VK Emoji</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./styles/reset.css" />
<link rel="stylesheet" href="./styles/style.css" />
<link rel="stylesheet" href="./styles/emojiPicker.css" />
<link rel="stylesheet" href="./styles/scrollbar.css" />
<link rel="stylesheet" href="./styles/tabs.css" />
</head>
<body>
<main>
<div class="chat__container">
<div class="stickers hidden shape">
<div class='tabs'>
<div class='tabs__content' style='transform: translateX(0px);'>
<div class="emoji-picker stickers__container tab" data-emoji-section="tab">
<div class="emoji-picker__content" data-scroll="content" data-content='allEmoji' style="transform: translateY(0)"></div>
<div class="scrollbar" data-scroll="container">
<div class="scrollbar__line" style="transform: translateY(0)"></div>
</div>
</div>
<div class="emoji-picker stickers__container tab" data-emoji-section="tab">
<div class="emoji-picker__content recently-emoji" data-scroll="content" data-content='recentlyEmoji' style="transform: translateY(0)" data-emoji-tab="recently"></div>
<div class="scrollbar" data-scroll="container">
<div class="scrollbar__line" style="transform: translateY(0)"></div>
</div>
</div>
</div>
</div>
<div class="emoji-panel">
<button class="button-icon emoji-panel__button" data-tab="all">
<svg xmlns="http://www.w3.org/2000/svg" fill="#99A2AD" viewBox="0 0 20 20" class="icon">
<defs />
<path d="M6.438 12.297a.9.9 0 011.273.15 2.772 2.772 0 00.516.415c.383.24.97.488 1.773.488.803 0 1.39-.249 1.773-.488a2.773 2.773 0 00.516-.416l.012-.013.002-.003a.9.9 0 011.4 1.132L13 13l.703.562-.001.002-.002.001-.002.004-.007.008-.018.021a3.516 3.516 0 01-.245.254c-.16.15-.394.345-.701.536A5.094 5.094 0 0110 15.15a5.094 5.094 0 01-2.727-.762 4.567 4.567 0 01-.701-.536 3.498 3.498 0 01-.245-.254l-.018-.021-.007-.008-.002-.004-.002-.001s0-.002.702-.564l-.703.562a.9.9 0 01.14-1.265zM8.25 8.25a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0zM13 9.5A1.25 1.25 0 1013 7a1.25 1.25 0 000 2.5z"/>
<path fill-rule="evenodd" d="M10 .1C4.532.1.1 4.532.1 10s4.432 9.9 9.9 9.9 9.9-4.432 9.9-9.9S15.468.1 10 .1zM1.9 10a8.1 8.1 0 1116.2 0 8.1 8.1 0 01-16.2 0z" clip-rule="evenodd"/>
</svg>
</button>
<button class="button-icon emoji-panel__button" data-tab="recently">
<svg viewBox="0 0 20 20" fill="#99A2AD" xmlns="http://www.w3.org/2000/svg" class="icon">
<path d="M10.4 6.00001C10.4 5.50295 9.99706 5.10001 9.50001 5.10001C9.00295 5.10001 8.60001 5.50295 8.60001 6.00001V10.5C8.60001 10.8752 8.83272 11.211 9.184 11.3427L13.184 12.8427C13.6494 13.0172 14.1682 12.7814 14.3427 12.316C14.5172 11.8506 14.2814 11.3318 13.816 11.1573L10.4 9.87631V6.00001Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0.100006C4.53239 0.100006 0.100006 4.53239 0.100006 10C0.100006 15.4676 4.53239 19.9 10 19.9C15.4676 19.9 19.9 15.4676 19.9 10C19.9 4.53239 15.4676 0.100006 10 0.100006ZM1.90001 10C1.90001 5.5265 5.5265 1.90001 10 1.90001C14.4735 1.90001 18.1 5.5265 18.1 10C18.1 14.4735 14.4735 18.1 10 18.1C5.5265 18.1 1.90001 14.4735 1.90001 10Z"/>
</svg>
</button>
</div>
</div>
<div class="input__wrapper">
<div contenteditable="true" class="input shape" id="chatInput" data-placeholder="Ваше сообщение"></div>
<div class="input__icon-button icon" aria-label='Открыть Emoji' role="button" data-action="openEmoji">
<svg xmlns="http://www.w3.org/2000/svg" fill="#C5D0DB" viewBox="0 0 20 20" class="input--icon">
<defs />
<path d="M6.438 12.297a.9.9 0 011.273.15 2.772 2.772 0 00.516.415c.383.24.97.488 1.773.488.803 0 1.39-.249 1.773-.488a2.773 2.773 0 00.516-.416l.012-.013.002-.003a.9.9 0 011.4 1.132L13 13l.703.562-.001.002-.002.001-.002.004-.007.008-.018.021a3.516 3.516 0 01-.245.254c-.16.15-.394.345-.701.536A5.094 5.094 0 0110 15.15a5.094 5.094 0 01-2.727-.762 4.567 4.567 0 01-.701-.536 3.498 3.498 0 01-.245-.254l-.018-.021-.007-.008-.002-.004-.002-.001s0-.002.702-.564l-.703.562a.9.9 0 01.14-1.265zM8.25 8.25a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0zM13 9.5A1.25 1.25 0 1013 7a1.25 1.25 0 000 2.5z"/>
<path fill-rule="evenodd" d="M10 .1C4.532.1.1 4.532.1 10s4.432 9.9 9.9 9.9 9.9-4.432 9.9-9.9S15.468.1 10 .1zM1.9 10a8.1 8.1 0 1116.2 0 8.1 8.1 0 01-16.2 0z" clip-rule="evenodd"/>
</svg>
</div>
</div>
</div>
</main>
</body>
<script src="scripts/emojiPicker.js"></script>
<script src="scripts/scroll.js"></script>
<script src="scripts/tabs.js"></script>
<script src="scripts/highlighter.js"></script>
</html>