Hugging Face's logo

Spaces:
ReikerXx
/
V
Running

App Files Community
Reaperxxxx commited on
Commit
32619da
·
verified ·
1 Parent(s): f758001

Upload 3 files

Browse files
Files changed (3) hide show
  1. index.html +146 -0
  2. script.js +2 -0
  3. style.css +258 -0
index.html ADDED
@@ -0,0 +1,146 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" >
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>CodePen - Chat UI Responsive</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
7
+ <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato'><link rel="stylesheet" href="./style.css">
8
+
9
+ </head>
10
+ <body>
11
+ <!-- partial:index.partial.html -->
12
+ <div class="--dark-theme" id="chat">
13
+ <div class="chat__conversation-board">
14
+ <div class="chat__conversation-board__message-container">
15
+ <div class="chat__conversation-board__message__person">
16
+ <div class="chat__conversation-board__message__person__avatar"><img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Monika Figi"/></div><span class="chat__conversation-board__message__person__nickname">Monika Figi</span>
17
+ </div>
18
+ <div class="chat__conversation-board__message__context">
19
+ <div class="chat__conversation-board__message__bubble"> <span>Somewhere stored deep, deep in my memory banks is the phrase &quot;It really whips the llama's ass&quot;.</span></div>
20
+ </div>
21
+ <div class="chat__conversation-board__message__options">
22
+ <button class="btn-icon chat__conversation-board__message__option-button option-item emoji-button">
23
+ <svg class="feather feather-smile sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
24
+ <circle cx="12" cy="12" r="10"></circle>
25
+ <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
26
+ <line x1="9" y1="9" x2="9.01" y2="9"></line>
27
+ <line x1="15" y1="9" x2="15.01" y2="9"></line>
28
+ </svg>
29
+ </button>
30
+ <button class="btn-icon chat__conversation-board__message__option-button option-item more-button">
31
+ <svg class="feather feather-more-horizontal sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
32
+ <circle cx="12" cy="12" r="1"></circle>
33
+ <circle cx="19" cy="12" r="1"></circle>
34
+ <circle cx="5" cy="12" r="1"></circle>
35
+ </svg>
36
+ </button>
37
+ </div>
38
+ </div>
39
+ <div class="chat__conversation-board__message-container">
40
+ <div class="chat__conversation-board__message__person">
41
+ <div class="chat__conversation-board__message__person__avatar"><img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Thomas Rogh"/></div><span class="chat__conversation-board__message__person__nickname">Thomas Rogh</span>
42
+ </div>
43
+ <div class="chat__conversation-board__message__context">
44
+ <div class="chat__conversation-board__message__bubble"> <span>Think the guy that did the voice has a Twitter?</span></div>
45
+ </div>
46
+ <div class="chat__conversation-board__message__options">
47
+ <button class="btn-icon chat__conversation-board__message__option-button option-item emoji-button">
48
+ <svg class="feather feather-smile sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
49
+ <circle cx="12" cy="12" r="10"></circle>
50
+ <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
51
+ <line x1="9" y1="9" x2="9.01" y2="9"></line>
52
+ <line x1="15" y1="9" x2="15.01" y2="9"></line>
53
+ </svg>
54
+ </button>
55
+ <button class="btn-icon chat__conversation-board__message__option-button option-item more-button">
56
+ <svg class="feather feather-more-horizontal sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
57
+ <circle cx="12" cy="12" r="1"></circle>
58
+ <circle cx="19" cy="12" r="1"></circle>
59
+ <circle cx="5" cy="12" r="1"></circle>
60
+ </svg>
61
+ </button>
62
+ </div>
63
+ </div>
64
+ <div class="chat__conversation-board__message-container">
65
+ <div class="chat__conversation-board__message__person">
66
+ <div class="chat__conversation-board__message__person__avatar"><img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Monika Figi"/></div><span class="chat__conversation-board__message__person__nickname">Monika Figi</span>
67
+ </div>
68
+ <div class="chat__conversation-board__message__context">
69
+ <div class="chat__conversation-board__message__bubble"> <span>WE MUST FIND HIM!!</span></div>
70
+ <div class="chat__conversation-board__message__bubble"> <span>Wait ...</span></div>
71
+ </div>
72
+ <div class="chat__conversation-board__message__options">
73
+ <button class="btn-icon chat__conversation-board__message__option-button option-item emoji-button">
74
+ <svg class="feather feather-smile sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
75
+ <circle cx="12" cy="12" r="10"></circle>
76
+ <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
77
+ <line x1="9" y1="9" x2="9.01" y2="9"></line>
78
+ <line x1="15" y1="9" x2="15.01" y2="9"></line>
79
+ </svg>
80
+ </button>
81
+ <button class="btn-icon chat__conversation-board__message__option-button option-item more-button">
82
+ <svg class="feather feather-more-horizontal sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
83
+ <circle cx="12" cy="12" r="1"></circle>
84
+ <circle cx="19" cy="12" r="1"></circle>
85
+ <circle cx="5" cy="12" r="1"></circle>
86
+ </svg>
87
+ </button>
88
+ </div>
89
+ </div>
90
+ <div class="chat__conversation-board__message-container reversed">
91
+ <div class="chat__conversation-board__message__person">
92
+ <div class="chat__conversation-board__message__person__avatar"><img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Dennis Mikle"/></div><span class="chat__conversation-board__message__person__nickname">Dennis Mikle</span>
93
+ </div>
94
+ <div class="chat__conversation-board__message__context">
95
+ <div class="chat__conversation-board__message__bubble"> <span>Winamp's still an essential.</span></div>
96
+ </div>
97
+ <div class="chat__conversation-board__message__options">
98
+ <button class="btn-icon chat__conversation-board__message__option-button option-item emoji-button">
99
+ <svg class="feather feather-smile sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
100
+ <circle cx="12" cy="12" r="10"></circle>
101
+ <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
102
+ <line x1="9" y1="9" x2="9.01" y2="9"></line>
103
+ <line x1="15" y1="9" x2="15.01" y2="9"></line>
104
+ </svg>
105
+ </button>
106
+ <button class="btn-icon chat__conversation-board__message__option-button option-item more-button">
107
+ <svg class="feather feather-more-horizontal sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
108
+ <circle cx="12" cy="12" r="1"></circle>
109
+ <circle cx="19" cy="12" r="1"></circle>
110
+ <circle cx="5" cy="12" r="1"></circle>
111
+ </svg>
112
+ </button>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ <div class="chat__conversation-panel">
117
+ <div class="chat__conversation-panel__container">
118
+ <button class="chat__conversation-panel__button panel-item btn-icon add-file-button">
119
+ <svg class="feather feather-plus sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
120
+ <line x1="12" y1="5" x2="12" y2="19"></line>
121
+ <line x1="5" y1="12" x2="19" y2="12"></line>
122
+ </svg>
123
+ </button>
124
+ <button class="chat__conversation-panel__button panel-item btn-icon emoji-button">
125
+ <svg class="feather feather-smile sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
126
+ <circle cx="12" cy="12" r="10"></circle>
127
+ <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
128
+ <line x1="9" y1="9" x2="9.01" y2="9"></line>
129
+ <line x1="15" y1="9" x2="15.01" y2="9"></line>
130
+ </svg>
131
+ </button>
132
+ <input class="chat__conversation-panel__input panel-item" placeholder="Type a message..."/>
133
+ <button class="chat__conversation-panel__button panel-item btn-icon send-message-button">
134
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-reactid="1036">
135
+ <line x1="22" y1="2" x2="11" y2="13"></line>
136
+ <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
137
+ </svg>
138
+ </button>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ <!-- partial -->
143
+ <script src="./script.js"></script>
144
+
145
+ </body>
146
+ </html>
script.js ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ // Chcek out Damian Denis on Dribbble
2
+ // https://dribbble.com/shots/5587903-ECHO-Voice-chat-for-gamers
style.css ADDED
@@ -0,0 +1,258 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .--dark-theme {
2
+ --chat-background: rgba(10, 14, 14, 0.95);
3
+ --chat-panel-background: #131719;
4
+ --chat-bubble-background: #14181a;
5
+ --chat-bubble-active-background: #171a1b;
6
+ --chat-add-button-background: #212324;
7
+ --chat-send-button-background: #8147fc;
8
+ --chat-text-color: #a3a3a3;
9
+ --chat-options-svg: #a3a3a3;
10
+ }
11
+
12
+ body {
13
+ background: url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
14
+ background-size: cover;
15
+ }
16
+
17
+ #chat {
18
+ background: var(--chat-background);
19
+ max-width: 600px;
20
+ margin: 25px auto;
21
+ box-sizing: border-box;
22
+ padding: 1em;
23
+ border-radius: 12px;
24
+ position: relative;
25
+ overflow: hidden;
26
+ }
27
+ #chat::before {
28
+ content: "";
29
+ position: absolute;
30
+ top: 0;
31
+ left: 0;
32
+ width: 100%;
33
+ height: 100%;
34
+ background: url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) fixed;
35
+ z-index: -1;
36
+ }
37
+ #chat .btn-icon {
38
+ position: relative;
39
+ cursor: pointer;
40
+ }
41
+ #chat .btn-icon svg {
42
+ stroke: #FFF;
43
+ fill: #FFF;
44
+ width: 50%;
45
+ height: auto;
46
+ position: absolute;
47
+ top: 50%;
48
+ left: 50%;
49
+ transform: translate(-50%, -50%);
50
+ }
51
+ #chat .chat__conversation-board {
52
+ padding: 1em 0 2em;
53
+ height: calc(100vh - 55px - 2em - 25px * 2 - .5em - 3em);
54
+ overflow: auto;
55
+ }
56
+ #chat .chat__conversation-board__message-container.reversed {
57
+ flex-direction: row-reverse;
58
+ }
59
+ #chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__bubble {
60
+ position: relative;
61
+ }
62
+ #chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__bubble span:not(:last-child) {
63
+ margin: 0 0 2em 0;
64
+ }
65
+ #chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__person {
66
+ margin: 0 0 0 1.2em;
67
+ }
68
+ #chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__options {
69
+ align-self: center;
70
+ position: absolute;
71
+ left: 0;
72
+ display: none;
73
+ }
74
+ #chat .chat__conversation-board__message-container {
75
+ position: relative;
76
+ display: flex;
77
+ flex-direction: row;
78
+ }
79
+ #chat .chat__conversation-board__message-container:hover .chat__conversation-board__message__options {
80
+ display: flex;
81
+ align-items: center;
82
+ }
83
+ #chat .chat__conversation-board__message-container:hover .option-item:not(:last-child) {
84
+ margin: 0 0.5em 0 0;
85
+ }
86
+ #chat .chat__conversation-board__message-container:not(:last-child) {
87
+ margin: 0 0 2em 0;
88
+ }
89
+ #chat .chat__conversation-board__message__person {
90
+ text-align: center;
91
+ margin: 0 1.2em 0 0;
92
+ }
93
+ #chat .chat__conversation-board__message__person__avatar {
94
+ height: 35px;
95
+ width: 35px;
96
+ overflow: hidden;
97
+ border-radius: 50%;
98
+ -webkit-user-select: none;
99
+ -moz-user-select: none;
100
+ -ms-user-select: none;
101
+ user-select: none;
102
+ ms-user-select: none;
103
+ position: relative;
104
+ }
105
+ #chat .chat__conversation-board__message__person__avatar::before {
106
+ content: "";
107
+ position: absolute;
108
+ height: 100%;
109
+ width: 100%;
110
+ }
111
+ #chat .chat__conversation-board__message__person__avatar img {
112
+ height: 100%;
113
+ width: auto;
114
+ }
115
+ #chat .chat__conversation-board__message__person__nickname {
116
+ font-size: 9px;
117
+ color: #484848;
118
+ -webkit-user-select: none;
119
+ -moz-user-select: none;
120
+ -ms-user-select: none;
121
+ user-select: none;
122
+ display: none;
123
+ }
124
+ #chat .chat__conversation-board__message__context {
125
+ max-width: 55%;
126
+ align-self: flex-end;
127
+ }
128
+ #chat .chat__conversation-board__message__options {
129
+ align-self: center;
130
+ position: absolute;
131
+ right: 0;
132
+ display: none;
133
+ }
134
+ #chat .chat__conversation-board__message__options .option-item {
135
+ border: 0;
136
+ background: 0;
137
+ padding: 0;
138
+ margin: 0;
139
+ height: 16px;
140
+ width: 16px;
141
+ outline: none;
142
+ }
143
+ #chat .chat__conversation-board__message__options .emoji-button svg {
144
+ stroke: var(--chat-options-svg);
145
+ fill: transparent;
146
+ width: 100%;
147
+ }
148
+ #chat .chat__conversation-board__message__options .more-button svg {
149
+ stroke: var(--chat-options-svg);
150
+ fill: transparent;
151
+ width: 100%;
152
+ }
153
+ #chat .chat__conversation-board__message__bubble span {
154
+ width: -webkit-fit-content;
155
+ width: -moz-fit-content;
156
+ width: fit-content;
157
+ display: inline-table;
158
+ word-wrap: break-word;
159
+ background: var(--chat-bubble-background);
160
+ font-size: 13px;
161
+ color: var(--chat-text-color);
162
+ padding: 0.5em 0.8em;
163
+ line-height: 1.5;
164
+ border-radius: 6px;
165
+ font-family: "Lato", sans-serif;
166
+ }
167
+ #chat .chat__conversation-board__message__bubble:not(:last-child) {
168
+ margin: 0 0 0.3em;
169
+ }
170
+ #chat .chat__conversation-board__message__bubble:active {
171
+ background: var(--chat-bubble-active-background);
172
+ }
173
+ #chat .chat__conversation-panel {
174
+ background: var(--chat-panel-background);
175
+ border-radius: 12px;
176
+ padding: 0 1em;
177
+ height: 55px;
178
+ margin: 0.5em 0 0;
179
+ }
180
+ #chat .chat__conversation-panel__container {
181
+ display: flex;
182
+ flex-direction: row;
183
+ align-items: center;
184
+ height: 100%;
185
+ }
186
+ #chat .chat__conversation-panel__container .panel-item:not(:last-child) {
187
+ margin: 0 1em 0 0;
188
+ }
189
+ #chat .chat__conversation-panel__button {
190
+ background: grey;
191
+ height: 20px;
192
+ width: 30px;
193
+ border: 0;
194
+ padding: 0;
195
+ outline: none;
196
+ cursor: pointer;
197
+ }
198
+ #chat .chat__conversation-panel .add-file-button {
199
+ height: 23px;
200
+ min-width: 23px;
201
+ width: 23px;
202
+ background: var(--chat-add-button-background);
203
+ border-radius: 50%;
204
+ }
205
+ #chat .chat__conversation-panel .add-file-button svg {
206
+ width: 70%;
207
+ stroke: #54575c;
208
+ }
209
+ #chat .chat__conversation-panel .emoji-button {
210
+ min-width: 23px;
211
+ width: 23px;
212
+ height: 23px;
213
+ background: transparent;
214
+ border-radius: 50%;
215
+ }
216
+ #chat .chat__conversation-panel .emoji-button svg {
217
+ width: 100%;
218
+ fill: transparent;
219
+ stroke: #54575c;
220
+ }
221
+ #chat .chat__conversation-panel .send-message-button {
222
+ background: var(--chat-send-button-background);
223
+ height: 30px;
224
+ min-width: 30px;
225
+ border-radius: 50%;
226
+ transition: 0.3s ease;
227
+ }
228
+ #chat .chat__conversation-panel .send-message-button:active {
229
+ transform: scale(0.97);
230
+ }
231
+ #chat .chat__conversation-panel .send-message-button svg {
232
+ margin: 1px -1px;
233
+ }
234
+ #chat .chat__conversation-panel__input {
235
+ width: 100%;
236
+ height: 100%;
237
+ outline: none;
238
+ position: relative;
239
+ color: var(--chat-text-color);
240
+ font-size: 13px;
241
+ background: transparent;
242
+ border: 0;
243
+ font-family: "Lato", sans-serif;
244
+ resize: none;
245
+ }
246
+
247
+ @media only screen and (max-width: 600px) {
248
+ #chat {
249
+ margin: 0;
250
+ border-radius: 0;
251
+ }
252
+ #chat .chat__conversation-board {
253
+ height: calc(100vh - 55px - 2em - .5em - 3em);
254
+ }
255
+ #chat .chat__conversation-board__message__options {
256
+ display: none !important;
257
+ }
258
+ }