-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathChatReal.html
More file actions
235 lines (232 loc) · 13 KB
/
Copy pathChatReal.html
File metadata and controls
235 lines (232 loc) · 13 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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en" data-selected-theme="normal">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Prismoria</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400..800&family=Gabarito:wght@400..900&family=Merriweather+Sans:wght@400;500;600;700;800&family=Spectral:wght@200;300;400;600;700&display=swap" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
<script src="https://kit.fontawesome.com/ad096bdfd9.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="SCSS/Defaults.css">
<link rel="stylesheet" href="SCSS/Chats.css">
<link rel="stylesheet" href="SCSS/Conversations.css">
<script type="module" src="JS/Chat.js" defer></script>
</head>
<body>
<nav>
<div id="nav-bar" class="flex-row">
<img src="Images/PrismaVerse_logo_transparent_white.png" alt="The PrismaVerse logo" id="logo"/>
<!-- <a class="icon-btn">Home</a> -->
<!-- <a class="icon-btn">My Spectrums</a> -->
<a class="icon-btn" href="/Chats4.html">Chats</a>
<!-- <img src="Images/PrismaVerse_logo_transparent_white.png" alt="The PrismaVerse logo" id="logo"/> -->
<a class="icon-btn" href="/Home.html">Home</a>
<img class="user-image" src="./Images/pfp2.jpg" alt="Profile picture">
<aside id="characters" class="flex-row pullout right">
<button class="expand" onclick="openCharacters()"><i class="fa fas fa-caret-left"></i></button>
<section class="characters flex-col pullout-content">
<h2>Roles</h2>
<hr>
<div class="role-element flex-row" style="--role-color: rgb(0, 0, 0); --role-color-2: rgb(35, 15, 0)">
<div class="user-grid">
<div class="user-image new"></div>
<h1 class="name">New Role</h1>
<p class="text">Click the plus to get started</p>
</div>
<button class="icon-btn circular" onclick="addRole()"><i class="fa fas fa-plus"></i></button>
</div>
<div class="flex-rc-p pagination hidden">
<button class="icon-btn circular small"></button>
</div>
</section>
<!-- <button class="expand" onclick="extendPullout(this)"><i class="fa fas fa-caret-left"></i></button> -->
<!-- <a class="icon-btn" href="/Home.html">Home</a> -->
<!-- <a class="icon-btn">My Spectrums</a> -->
<!-- <a class="icon-btn" href="/Chats4.html">Chats</a> -->
</aside>
</div>
</nav>
<main>
<section class="add flex-cc-p-g hidden">
<button id="exit-panel" class="icon-btn circular exitPanel"><i class="fa fas fa-xmark"></i></button>
<h2>Roles</h2>
<hr>
<div class="role-head flex-rc-p-g">
<button class="icon-btn circular"><i class="fa fas fa-upload"></i></button>
<img class="user-image" src="Images/Pfps/GraAnonPFP.png">
<button class="icon-btn circular"><i class="fa fas fa-palette"></i></button>
</div>
<input class="name-input" type="text" placeholder="Name"/>
<input class="subtext-input" type="text" placeholder="Subtext"/>
<p>Notes</p>
<textarea class="notes"></textarea>
<p>Description</p>
<textarea class="description"></textarea>
<button id="new-role" class="icon-btn">Save<i class="fa fas fa-floppy-disk"></i></button>
</section>
<!-- <aside id="members" class="flex-row pullout left">
<section class="members flex-col pullout-content">
<h1>Chat Info</h1>
<div class="users flex-rc-p-g">
</div>
<div class="progress progress-moved">
<div class="progress-bar">
</div>
</div>
<div class="searched flex-rc-p">
<button class="flex-cc-p"><i class="fa fas fa-image"></i><p>Search</p></button>
<button class="flex-cc-p"><i class="fa fas fa-message"></i><p>Search</p></button>
<button class="flex-cc-p"><i class="fa fas fa-link"></i><p>Search</p></button>
</div>
<hr>
<div class="backgrounds flex-rc-p">
<div class="card flex-cc-p">
<img src="Images/purpleVert.jpg">
<p>Vertical</p>
</div>
<div class="card flex-cc-p">
<img src="Images/purpleH.jpg">
<p>Horizontal</p>
</div>
</div>
<button class="icon-btn labeled"><i class="fa fas fa-plus"></i><p>Add Users</p></button>
<button class="icon-btn labeled"><i class="fa fas fa-door-closed"></i><p>Leave</p></button>
</section>
<button class="expand"><i class="fa fas fa-caret-right"></i></button>
</aside> -->
<!-- <aside id="convos" class="flex-row pullout left secondary">
<section class="convos flex-col pullout-content">
<div id="convoMenu" class="flex-rc">
<button id="privC" class="bottom_border">Private</button>
<button id="pubC" class="bottom_border">Public</button>
<button id="inviC" class="bottom_border">Invites</button>
<button id="addC" class="bottom_border">+</button>
</div>
<div class="base-listing unread bottom_border user-grid p10">
<img src="Images/pfp.jpg" class="user-image">
<div class="heading flex-r-g name">
<p class="title f15">Starlight</p>
<p class="time">1m</p>
</div>
<p class="text">hey, so about the project on l i z a r d s and canabalism... I think it's b a d. Do you agree that we should</p>
</div>
<div class="base-listing bottom_border user-grid p10">
<img src="Images/pfp2.jpg" class="user-image">
<div class="heading flex-r-g name">
<p class="title f15">Jaylex, Starlight, Nix, Levi</p>
<p class="time">1m</p>
</div>
<p class="text">hey!</p>
</div>
<div class="base-listing bottom_border user-grid p10">
<img src="Images/pfpGreen.png" class="user-image">
<div class="heading flex-r-g name">
<p class="title f15">Unread</p>
<p class="time">1m</p>
</div>
<p class="text">short sorry))</p>
</div>
<div class="base-listing bottom_border user-grid p10">
<img src="Images/pfpGreen2.webp" class="user-image">
<div class="heading flex-r-g name">
<p class="title f15">Unread</p>
<p class="time">1m</p>
</div>
<p class="text">hey, so about the project on l i z a r d s and canabalism... I think it's b a d.</p>
</div>
</section>
<button class="expand"><i class="fa fas fa-caret-right"></i></button>
</aside> -->
<section id="chat" class="flex-col">
<header class="p10 user-grid">
<img class="user-image" src="Images/pfp.jpg" />
<h1 class="name">Starlight</h1>
<p class="text online">Online</p>
</header>
<section class="flex-col">
<!-- <div class="message dice user-grid top p10">
<img src="Images/Pfps/Jacob512.png" class="user-image" style="border-color: rgb(77, 0, 0); background-color: rgb(77, 0, 0); border-width: 3px;">
<h2 class="name" style="background-color: rgb(77, 0, 0);">Jacob</h2>
<div class="text p10">
<img src="Images/Dice/d20.jpg" style="background-color: rgb(77, 0, 0);">
<p class="dice-number">14</p>
</div>
</div> -->
</section>
<footer class="flex-c-p-g">
<div class="character-select flex-r-g hidden">
<button class="icon-btn labeled" id="noRole"><p>None</p></button>
</div>
<div class="flex-r-g message-line">
<button id="role-btn" class="icon-btn"><!--<i class="fa fas fa-user"></i>--><img src="Images/pfp2.jpg"><p>Roles</p></button>
<textarea placeholder="Type something..." rows="1" id="input"></textarea>
<!-- Add sendMessage onclick -->
<button class="icon-btn" id="send"><i class="fa fas fa-paper-plane"></i><p>Send</p></button>
</div>
<div class="flex-rc-g buttons">
<!-- <button class="icon-btn"><i class="fa fas fa-microphone"></i><p>Voice Message</p></button>
<button class="icon-btn"><i class="fa fas fa-image"></i><p>Image</p></button>
<button class="icon-btn"><i class="fa fas fa-gamepad"></i><p>Game</p></button>
<button class="icon-btn"><i class="fa fas fa-face-laugh-beam"></i><p>Sticker</p></button> -->
<!-- <button id="dice-btn" class="icon-btn"><i class="fa fas fa-dice-three"></i><p>Dice</p></button> -->
</div>
<!-- <div class="dice-options flex-rc-g hidden">
<button class="icon-btn"><i class="fa fas fa-dice-three"></i><p>4</p></button>
<button class="icon-btn"><i class="fa fas fa-dice-three"></i><p>6</p></button>
<button class="icon-btn"><i class="fa fas fa-dice-three"></i><p>8</p></button>
<button class="icon-btn"><i class="fa fas fa-dice-three"></i><p>12</p></button>
<button class="icon-btn"><i class="fa fas fa-dice-three"></i><p>20</p></button>
</div> -->
</footer>
</section>
<!-- class="flex-row pullout right" Took out of aside below -->
<!-- <aside id="characters" > -->
<!-- <button class="expand" onclick="openCharacters()"><i class="fa fas fa-caret-left"></i></button>
<section class="characters flex-col pullout-content">
<h2>Roles</h2>
<hr>
<div class="role-element flex-row" style="--role-color: rgb(0, 0, 0); --role-color-2: rgb(35, 15, 0)">
<div class="user-grid">
<div class="user-image new"></div>
<h1 class="name">New Role</h1>
<p class="text">Click the plus to get started</p>
</div>
<button id="add-role" class="icon-btn circular"><i class="fa fas fa-plus"></i></button>
</div>
<div class="flex-rc-p pagination hidden">
<button class="icon-btn circular small"></button>
</div>
</section> -->
<!-- This is the button for roles but it also shuts down the whole chats page? -->
<!-- <button class="expand" onclick="extendPullout(this)"><i class="fa fas fa-caret-left"></i></button> -->
<!-- </aside> -->
<article id="character-info">
<h1 id="close-character" class="f2">Role Info</h1>
<i class="lower fa fas fa-caret-down"></i>
<hr>
<header class="flex-cc-p">
<img src="Images/pfpGreen2.webp">
<h2 class="f175">Jay Star</h2>
<p class="f125">nickname thing</p>
</header>
<hr>
<section class="p10">
<h2 class="f15">Notes</h2>
<textarea class="f125 notes"></textarea>
<h2 class="f15">Description</h2>
<textarea class="f125 description"></textarea>
</section>
<footer class="flex-r-g">
<button id="relinquish" class="icon-btn"><i class="fa fas fa-ban"></i><p>Relinquish Role</p></button>
<button id="claim" class="icon-btn"><i class="fa fas fa-ban"></i><p>Join Role</p></button>
<button id="save" class="icon-btn"><i class="fa fas fa-floppy-disk"></i><p>Save</p></button>
</footer>
</article>
</main>
<footer>
</footer>
</body>
</html>