-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathchat.html
More file actions
179 lines (177 loc) · 7.17 KB
/
chat.html
File metadata and controls
179 lines (177 loc) · 7.17 KB
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<html>
<!-- The <head> is the section where all "invisible" information is stored -->
<head>
<!-- Defines the text layout (mandatory) -->
<meta charset="utf-8">
<!-- Makes a page responsive and "good looking" on mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Title -->
<title>Chat App</title>
<!-- Stylesheets that contain some CSS to handle the looks of our website -->
<link rel="stylesheet" type="text/css" href="./chat.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<!-- The <body> is the section where all our pages elements are defined -->
<body>
<!-- The mainGrid class is our main Layout box. It divides the page into a sidebar and a main content area -->
<div class="mainGrid">
<!-- The aside is the sidebar of the page (could be also a <div> with a class, but for accessibility reasons we chose the pre-defined HTML tag) -->
<aside>
<!-- Every "chat"-div resembles a contact in the sidebar -->
<div class="chat">
<!-- To better style the content of the box we put the content in a seperate box -->
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
<div class="chat">
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
<div class="chat">
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
<div class="chat">
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
<div class="chat">
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
<div class="chat">
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
<div class="chat">
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
<div class="chat">
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
<div class="chat">
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
<div class="chat">
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
<div class="chat">
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
<div class="chat">
<div class="content">
<h1>Max Mustermann</h1>
<p>Hi, ich bin eine Antwort die etwas viel zu lang geworden ist</p>
</div>
</div>
</aside>
<!-- The <main> area is where we will implement our chat -->
<main>
<!-- The "chatInfos"-div contains the header-Information of the chat -->
<div class="chatInfos">
<!-- We need an additional container to corretly position our elements -->
<div class="contact">
<h1>Max Mustermann</h1>
<p>Vor 38 Minuten</p>
<!-- Our navigation button that will only be shown in the mobile layout of our page -->
<img src="back.svg" />
</div>
</div>
<!-- In this area we display our chat messages -->
<div class="content">
<!-- Each "msg"-div is one chat message, left and right define if the message is from you or your chat partner -->
<div class="msg left">
Hi, ich bin eine Nachricht
</div>
<div class="msg right">
Hi, ich bin eine Antwort.
</div>
<div class="msg left">
Hi, ich bin eine Nachricht
</div>
<div class="msg right">
Hi, ich bin eine Antwort.
</div>
<div class="msg left">
Hi, ich bin eine Nachricht
</div>
<div class="msg right">
Hi, ich bin eine Antwort.
</div>
<div class="msg left">
Hi, ich bin eine Nachricht
</div>
<div class="msg right">
Hi, ich bin eine Antwort.
</div>
<div class="msg left">
Hi, ich bin eine Nachricht
</div>
<div class="msg right">
Hi, ich bin eine Antwort.
</div>
<div class="msg left">
Hi, ich bin eine Nachricht
</div>
<div class="msg right">
Hi, ich bin eine Antwort.
</div>
<div class="msg left">
Hi, ich bin eine Nachricht
</div>
<div class="msg right">
Hi, ich bin eine Antwort.
</div>
<div class="msg left">
Hi, ich bin eine Nachricht
</div>
<div class="msg right">
Hi, ich bin eine Antwort.
</div>
<div class="msg left">
Hi, ich bin eine Nachricht
</div>
<div class="msg right">
Hi, ich bin eine Antwort.
</div>
</div>
<!-- This area contains the input and send box -->
<div class="input">
<!-- Here we can enter our chat-Message -->
<input type="text">
<!-- In this box the send-Button is placed -->
<div class="sendBtn">
<img src="send.svg" />
</div>
</div>
</main>
</div>
</body>
</html>