-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
1540 lines (1538 loc) · 90.1 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
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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!--
Glipo
Copyright (C) Glipo Technologies. All Rights Reserved.
https://glipo.net
-->
<!DOCTYPE html>
<html>
<head>
<title>Glipo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">
<meta name="description" content="Join Glipo today, the network that connects communities through the internet. We've got stories, photos, memes, tips, tricks and more!">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Glipo">
<link rel="apple-touch-icon" sizes="180x180" href="/media/icons/apple-touch-icon.png">
<link rel="shortcut icon" href="/media/small.png">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="/lib/dialog-polyfill.css">
<link rel="stylesheet" href="/lib/font.css">
<link rel="stylesheet" href="/style.css">
<script src="/lib/dialog-polyfill.js"></script>
<script src="/lib/jquery.min.js"></script>
<script src="/lib/showdown.min.js"></script>
<script src="/lib/firebase-app.js"></script>
<script src="/lib/firebase-analytics.js"></script>
<script src="/lib/firebase-auth.js"></script>
<script src="/lib/firebase-firestore.js"></script>
<script src="/lib/firebase-functions.js"></script>
<script src="/lib/firebase-storage.js"></script>
<script src="/lib/firebase-messaging.js"></script>
<script src="/core.js"></script>
<script src="/lang.js"></script>
<script src="/pages.js"></script>
<script src="/mdRenderer.js"></script>
<script src="/ce.js"></script>
<script src="/upload.js"></script>
<script src="/script.js"></script>
<script src="/api.js"></script>
<script src="/posts.js"></script>
<script src="/profilePosts.js"></script>
<script src="/post.js"></script>
<script src="/messages.js"></script>
<script src="/staff.js"></script>
<script src="/moderators.js"></script>
<script src="/report.js"></script>
<script src="/lang/en_GB.js"></script>
</head>
<body>
<a class="skipTo" href="#content">@Skip to content</a>
<a class="skipTo" href="#sidebar">@Skip to sidebar</a>
<nav>
<a href="/" class="logo">
<img src="/media/largeWhite.png" alt="@Glipo" class="desktop" />
<img src="/media/small.png" alt="@Glipo" class="mobile" />
</a>
<div class="search">
<input placeholder="@Search">
<icon aria-hidden="true">search</icon>
</div>
<button onclick="toggleMenu();" class="location desktop">
<span class="currentLocation">@Feed</span>
<icon aria-hidden="true" class="locationDropdownIndicator">arrow_drop_down</icon>
</button>
<span class="signedIn">
<button title="@Notifications" onclick="window.location.href = '/notifications';" class="menuButton menuButtonHalf notificationsButton"><icon aria-label="@Notifications">notifications</icon></button>
<button title="@Sign out" onclick="signOut();" class="menuButton menuButtonHalf"><icon aria-label="@Sign out" class="flippable">exit_to_app</icon></button>
</span>
<span class="signedOut">
<button onclick="showSignInDialog();" class="menuButton menuButtonBig blue">@Sign in</button>
</span>
<button onclick="toggleMenu();" class="menuButton menuButtonSmall"><icon aria-label="@Open/close menu">menu</icon></button>
</nav>
<div class="menu">
<div class="forMenuButtonSmall">
<div class="signedIn">
<button onclick="window.location.href = '/notifications';">@Notifications</button>
<button onclick="signOut();">@Sign out</button>
</div>
<div class="signedOut">
<button onclick="showSignInDialog();">@Sign in</button>
<button onclick="showSignUpDialog();">@Sign up</button>
</div>
</div>
<div class="mobile">
<button onclick="window.location.href = '/about';">@About Glipo</button>
</div>
<div class="signedIn">
<button onclick="window.location.href = '/settings';">@Settings</button>
<div class="isStaff">
<button onclick="window.location.href = '/staff';">@Staff area</button>
</div>
<div class="canCreateGroups">
<button onclick="window.location.href = '/creategroup';">@Create a group</button>
</div>
<hr>
</div>
<button onclick="window.location.href = '/';">@Feed</button>
<div class="signedIn">
<button onclick="visitUserProfile();">u/<span class="currentUsername"></span></button>
</div>
<div class="joinedGroups"></div>
</div>
<header data-location="^g\/[^\/]+$">
<h1 class="groupName"></h1>
<p class="groupDescription"></p>
<span class="mobile">
<span class="pageExistent">
<details>
<summary><span>@Group info</span> <button onclick="toggleGroupMembership();" class="floatEnd blue groupJoinButton">@Join</button></summary>
<p><strong class="groupMemberCount">@{0} members|---</strong></p>
<p class="groupPostCount">@{0} posts|---</p>
<p class="groupCommentCount">@{0} comments|---</p>
<button class="big visitGroupRules">@View group rules</button>
<span class="signedIn">
<span class="isModerator">
<button onclick="visitModeratorTools();" class="big">@Moderator tools</button>
</span>
<span class="isNotModerator">
<button onclick="visitModmailSender();" class="big">@Message moderators</button>
</span>
</span>
</details>
</span>
</span>
</header>
<main id="content">
<span class="error404">
<section class="posts pageMessage middle">
<h1>@A bit lost?</h1>
<p>@The page that you requested was not found.</p>
<button onclick="window.location.href = '/';" class="blue">@Go home</button>
<div class="spacer"></div>
<small>404</small>
</section>
</span>
<section class="posts" data-location="^g\/[^\/]+$|^\/$"> <!-- Feed and group page -->
<div data-location="^/$"> <!-- Feed page only -->
<div class="mobile">
<div class="signedOut">
<card data-location="^g\/[^\/]+$|^\/$">
<h1>@Welcome to Glipo</h1>
<p>@Glipo is a social network where you can discover your community through our groups.</p>
<button onclick="showSignUpDialog();" class="big blue">Sign up</button>
</card>
</div>
</div>
</div>
<div class="pageExistent">
<card class="sorts">
<button onclick="sortPostsBy('popular');" aria-label="@Popular" class="sort sortPopular"><icon aria-hidden="true">whatshot</icon> <span>@Popular</span></button>
<button onclick="sortPostsBy('best');" aria-label="@Best" class="sort sortBest"><icon aria-hidden="true">bar_chart</icon> <span>@Best</span></button>
<button onclick="sortPostsBy('newest');" aria-label="@Newest" class="sort sortNewest"><icon aria-hidden="true">new_releases</icon> <span>@Newest</span></button>
<button onclick="visitSubmitPost();" class="newPost yellow floatEnd"><icon aria-hidden="true">add</icon> <span>@New post</span></button>
</card>
<card class="searchSiteWidePrompt">
<p>@Looking for something that's a bit less specific? We can search for posts that are outside of this group, too!</p>
<div class="buttonRow">
<button onclick="searchSiteWide();" class="blue">@Search the whole site</button>
</div>
</card>
<div class="loadingPosts">
<div class="loadingSpinner"></div>
</div>
<div class="loadedGroupResults">
<h1>@Groups</h1>
</div>
<div class="loadedUserResults">
<h1>@Users</h1>
</div>
<div class="loadedPostsHeader">
<h1>@Posts</h1>
</div>
<div class="loadedPosts"></div>
<div class="noPosts pageMessage middle">
<h1>@Give this group its very first post</h1>
<p>@Get started by writing this group's first ever post. It'll be monumental!</p>
<button onclick="visitSubmitPost();" class="blue">@Write a post</button>
</div>
<div class="noResults pageMessage middle">
<h1>@We can't find what you're looking for</h1>
<p>@There doesn't seem to be any posts that match your search term. Maybe try searching for something different!</p>
<button onclick="window.location.href = '/';" class="blue">@Go home</button>
</div>
</div>
<div class="pageNonExistent pageMessage middle">
<h1>@This group doesn't exist!</h1>
<p>@Check to see if you entered the group name correctly. If you want to create a group with this name, go ahead!</p>
<button onclick="visitCreateGroup();" class="blue">@Create a group</button>
</div>
</section>
<section class="posts" data-location="^g\/[^\/]+\/posts\/[^\/]+$"> <!-- Opened post page -->
<div class="loadingPosts">
<div class="loadingSpinner"></div>
</div>
<div class="loadedPosts">
<card class="transparent noPadding">
<button onclick="window.close(); window.history.back();" class="transparent">
<icon aria-hidden="true" class="flippable">arrow_back</icon>
<span>@Back</span>
</button>
</card>
<div class="editPost">
<input placeholder="@Post title" class="big" id="editPostTitle">
<div class="editPostWriteup">
<div class="contentEditor"></div>
</div>
<div class="editPostOther">
<p class="middle">@The contents of this post cannot be changed as this post is not a writeup.</p>
</div>
<p class="errorMessage" id="editPostError"></p>
<div class="buttonRow paddingBottom">
<button class="blue editPostSubmitButton">@Edit</button>
<button class="editPostCancelButton">@Cancel</button>
<button class="editPostDeleteButton desktop">@Delete post</button>
<button class="editPostDeleteButton mobile"><icon>delete</icon></button>
</div>
</div>
<card class="post">
<div class="info">
<a class="group postGroup"></a>
<span>·</span>
<span class="postAuthor"></span>
<span>·</span>
<span class="postTimestamp"></span>
<span class="postIsEdited">
<span>·</span>
<span class="postEditTime">@Edited</span>
</span>
</div>
<h1 class="postTitle"></h1>
<div class="postContent fullContent"></div>
<div class="actions">
<div>
<button title="@Upvote" aria-label="@Upvote" class="upvoteButton postUpvoteButton">
<icon>arrow_upward</icon>
<span class="postUpvotes">@Up</span>
</button>
<button title="@Downvote" aria-label="@Downvote" class="downvoteButton postDownvoteButton">
<icon>arrow_downward</icon>
<span class="postDownvotes">@Down</span>
</button>
</div>
<div>
<button title="@Crosspost" aria-label="@Crosspost" class="postCrosspostButton">
<icon>share</icon>
<span class="postCrossposts">0</span>
</button>
<span class="postAuthoredByMe">
<button title="@Edit or delete" aria-label="@Edit or delete" class="editPostButton">
<icon>edit</icon>
</button>
</span>
<span class="postNotAuthoredByMe">
<button title="@Report" aria-label="@Report" class="reportPostButton">
<icon>flag</icon>
</button>
</span>
</div>
</div>
</card>
<card class="informational hidden postDeleted">
<strong>@This post has been deleted by its author.</strong>
<span>@The comments on this post have been kept for informational purposes.</span>
</card>
<card class="informational hidden postStaffRemoved">
<strong>@This post has been removed by staff because it violates the rules of Glipo's Content Policy.</strong>
<span>@Votes can still be cast, but they will not affect the ranking of this post.</span>
</card>
<card class="informational hidden postModeratorRemoved">
<strong>@This post has been removed by a moderator as it violates the rules of this group.</strong>
<span>@Votes can still be cast, but they will not affect the ranking of this post.</span>
</card>
<card class="transparent noPadding">
<div class="signedIn">
<button onclick="openRootCommentCe();" aria-label="@New comment" class="ceSummoner">@Write a comment...</button>
<div class="ceUnsummoned">
<div class="writeComment contentEditor"></div>
<div class="buttonRow">
<button onclick="writeComment();" class="blue" id="writeCommentButton">@Post</button>
<button onclick="ceUnsummon();">@Cancel</button>
</div>
<p class="errorMessage" id="writeCommentError"></p>
</div>
</div>
<div class="signedOut">
<button onclick="showSignUpDialog();" class="ceSummoner">@Sign up to write a comment...</button>
</div>
</card>
<card class="sorts">
<button onclick="sortPostsBy('best');" aria-label="@Best" class="sort sortBest blue"><icon aria-hidden="true">bar_chart</icon> <span>@Best</span></button>
<button onclick="sortPostsBy('newest');" aria-label="@Newest" class="sort sortNewest"><icon aria-hidden="true">new_releases</icon> <span>@Newest</span></button>
</card>
<div class="postComments"></div>
<button onclick="showMoreComments();" class="showMoreComments">@Show more comments ({0} remaining)|0</button>
</div>
<div class="pageNonExistent middle">
<div class="pageMessage">
<h1>@Which post were you talking about?!</h1>
<p>@It seems that no post exists with this link; check to see if the address is correct.</p>
<button onclick="window.location.href = '/';" class="blue">@Go home</button>
</div>
</div>
</section>
<section class="posts" data-location="^g\/[^\/]+\/rules$"> <!-- Group rules page -->
<div class="loadingRules">
<div class="loadingSpinner"></div>
</div>
<div class="pageExistent">
<div class="loadedRules">
<card class="transparent noPadding">
<button onclick="window.close(); window.history.back();" class="transparent">
<icon aria-hidden="true" class="flippable">arrow_back</icon>
<span>@Back</span>
</button>
</card>
<card class="post">
<h1 class="groupRulesHeader">@Group rules</h1>
<div class="hasRules">
<div class="groupRules"></div>
</div>
<div class="hasNoRules">
<p>@This group doesn't have any rules! You will still need to abide by Glipo's Content Policy, though.</p>
</div>
</card>
</div>
</div>
</div>
<div class="pageNonExistent middle">
<div class="pageMessage">
<h1>@This non-existent group has no rules</h1>
<p>@That's somewhat unsurprising, though. You may have mistyped the URL there.</p>
<button onclick="window.location.href = '/';" class="blue">@Go home</button>
</div>
</div>
</section>
<section class="posts" data-location="^g\/[^\/]+\/modtools$"> <!-- Group moderator tools page -->
<div class="signedIn">
<div class="isModerator">
<h1 class="mobile">
<a href="#" class="groupName groupLink noColour"></a>
<a href="javascript:modVisitSettings();"><icon aria-label="@Settings">settings</icon></a>
</h1>
<div class="tabs">
<div class="tabstrip">
<button class="selected" data-tab="modqueue">@Modqueue</button>
<button data-tab="reports">@Reports</button>
<button data-tab="modmail">@Modmail</button>
<button data-tab="members">@Members</button>
</div>
<div class="tabcontents giveMarginTop">
<div data-tab="modqueue" id="modModqueue">
<div class="loadingSpinner"></div>
<div class="modqueueItems"></div>
</div>
<div data-tab="reports" id="modReports">
<div class="loadingSpinner"></div>
<div class="modReportItems"></div>
</div>
<div data-tab="modmail" id="modmail">
<div class="loadingSpinner"></div>
<div class="modModmailList"></div>
</div>
<div data-tab="members" id="modMembers">
<div class="loadingSpinner"></div>
<div class="modMemberList"></div>
</div>
</div>
</div>
</div>
<div class="isNotModerator">
<div class="pageMessage middle">
<h1 class="groupNameModRequirement">@You must be a moderator to access moderator tools for this group</h1>
<p>@This page is restricted to moderators only.</p>
<button onclick="window.location.href = '/';" class="blue">@Go home</button>
</div>
</div>
<div class="isGroupBanned">
<div class="pageMessage middle">
<h1>@You are currently banned from this group</h1>
<p>@A moderator banned you from this group, preventing you from being able to access this group's moderator tools.</p>
<button onclick="window.location.href = '/';" class="blue">@Go home</button>
</div>
</div>
</div>
<div class="signedOut">
<div class="pageMessage middle">
<h1>@Sign in to access moderator tools</h1>
<p>@You must be a moderator of this group to access moderator tools.</p>
<button onclick="showSignInDialog();" class="blue">@Sign in</button>
</div>
</div>
<div class="loadingUser">
<div class="loadingSpinner"></div>
</div>
</section>
<section class="posts" data-location="^g\/[^\/]+\/settings$"> <!-- Group settings page -->
<div class="signedIn">
<div class="isModerator">
<div class="isOwner">
<span class="mobile">
<card class="transparent noPadding">
<button onclick="visitModeratorTools();" class="transparent">
<icon aria-hidden="true" class="flippable">arrow_back</icon>
<span>@Back</span>
</button>
</card>
</span>
<h1 class="modSettingsHeading">@Group settings</h1>
<div class="settingsSheet">
<label>
<span>@Group name</span>
<input id="modSettingsGroupName">
</label>
<p class="itemDescription">@The group name cannot be changed, but the casing of the letters in it can be changed.</p>
<label>
<span>@Description</span>
<textarea placeholder="@Tell us about what your group does..." maxlength="200" id="modSettingsGroupDescription"></textarea>
</label>
<p class="errorMessage" id="modSettingsProfileError"></p>
<div class="buttonRow">
<button onclick="saveGroupProfile();" class="blue" id="modSettingsProfileButton">@Save</button>
</div>
<h2>@Rules</h2>
<p>@Define what your group's members can and can't do through rules. Members can then report posts that violate certain rules through Glipo's reporting system.</p>
<div class="hasRules">
<div class="modSettingsRules"></div>
</div>
<div class="hasNoRules">
<p class="info middle">@There are no rules for this group</p>
</div>
<div class="buttonRow">
<button onclick="showNewGroupRuleDialog();" class="blue">@New rule</button>
</div>
<h2>@Modmail</h2>
<label>
<span>@Welcome message</span>
<div class="contentEditor" id="modSettingsModmailMessage"></div>
</label>
<p class="itemDescription">@This welcome message will appear on the page that users visit to contact your group's moderators.</p>
<p class="errorMessage" id="modSettingsModmailError"></p>
<div class="buttonRow">
<button onclick="saveGroupModmailSettings();" class="blue" id="modSettingsModmailButton">@Save</button>
</div>
</div>
</div>
<div class="isNotOwner">
<div class="pageMessage middle">
<h1 class="groupNameModRequirement">@You must be an owner of this group to change group settings</h1>
<p>@You must be a moderator with owner permissions in order to change this group's settings.</p>
<button onclick="visitModeratorTools();" class="blue">@Back to moderator tools</button>
</div>
</div>
</div>
<div class="isNotModerator">
<div class="pageMessage middle">
<h1 class="groupNameModRequirement">@You must be a moderator to access moderator tools for this group</h1>
<p>@This page is restricted to moderators only.</p>
<button onclick="window.location.href = '/';" class="blue">@Go home</button>
</div>
</div>
<div class="isGroupBanned">
<div class="pageMessage middle">
<h1>@You are currently banned from this group</h1>
<p>@A moderator banned you from this group, preventing you from being able to access this group's moderator tools.</p>
<button onclick="window.location.href = '/';" class="blue">@Go home</button>
</div>
</div>
</div>
<div class="signedOut">
<div class="pageMessage middle">
<h1>@Sign in to access moderator tools</h1>
<p>@You must be a moderator of this group to access moderator tools.</p>
<button onclick="showSignInDialog();" class="blue">@Sign in</button>
</div>
</div>
<div class="loadingUser">
<div class="loadingSpinner"></div>
</div>
</section>
<section class="posts" data-location="^g\/[^\/]+\/modmail$"> <!-- Modmail sender page -->
<div class="signedIn">
<h1 class="modmailHeading">@Message the moderators</h1>
<p><strong>@Enter the message that you would like to send to the moderators of this group. A member of this group should reply shortly.</strong></p>
<div class="modmailMessage"></div>
<div class="contentEditor" id="modmailSendContent"></div>
<div class="errorMessage" id="modmailSendError"></div>
<div class="buttonRow">
<button onclick="sendModmail();" class="blue modmailSendButton">@Send</button>
<button onclick="window.history.back();">@Cancel</button>
</div>
</div>
<div class="signedOut">
<div class="pageMessage middle">
<h1>@Sign in to send messages to moderators</h1>
<p>@To send a message to the moderators of this group, please sign in.</p>
<button onclick="showSignInDialog();" class="blue">@Sign in</button>
</div>
</div>
</section>
<section class="posts" data-location="^submit$"> <!-- Post submitting page -->
<div class="signedIn">
<h1>@Submit your post</h1>
<input placeholder="@Enter a group to post to" class="grow" id="submitGroup">
<div class="tabs">
<div class="tabstrip">
<button class="selected" data-tab="writeup" id="submitWriteupTab">@Writeup</button>
<button data-tab="media" id="submitMediaTab">@Media</button>
<button data-tab="link" id="submitLinkTab">@Link</button>
</div>
<div class="tabcontents" id="submitType">
<div data-tab="writeup">
<input placeholder="@Post title" class="big" id="submitWriteupTitle">
<div class="contentEditor" id="submitWriteupContent"></div>
</div>
<div data-tab="media">
<input placeholder="@Post title" class="big" id="submitMediaTitle">
<div class="upload" id="submitMediaUpload"></div>
</div>
<div data-tab="link">
<input placeholder="@Post title" class="big" id="submitLinkTitle">
<input placeholder="@URL to content" class="big" id="submitLinkUrl">
</div>
</div>
</div>
<div class="buttonRow">
<button onclick="submitPost();" class="blue submitButton">@Submit</button>
<button onclick="window.history.back();">@Cancel</button>
</div>
<p class="errorMessage" id="submitError"></p>
</div>
<div class="signedOut middle">
<div class="pageMessage">
<h1>@Make your mark</h1>
<p>@Sign in to submit your brand new post. If you don't have an account, sign up!</p>
<button onclick="showSignInDialog();" class="blue">@Sign in</button>
</div>
</div>
</section>
<section class="posts userProfile" data-location="^u\/.*$"> <!-- User page -->
<span class="mobile">
<span class="pageExistent">
<card data-location="^u\/.*$">
<h2><strong class="userUsername"></strong></h2>
<p><strong class="userStaffTitle"></strong></p>
<p class="userBio"></p>
<p title="@This message was added by a member of Glipo staff." class="errorMessage userStaffCommentary"></p>
<p class="userJoinDate">@Joined {0}|---</p>
<p>
<strong class="userPoints">@{0} points|---</strong>
<span>·</span>
<span class="userPostCount">@{0} posts|---</span>
<span>·</span>
<span class="userCommentCount">@{0} comments|---</span>
</p>
<div class="userIsNotMe">
<button onclick="visitUserMessages();" class="big blue">@Send message</button>
</div>
</card>
<span class="donorInfo">
<card>
<p class="donorSince">@Glipo donor</p>
</card>
</span>
</span>
</span>
<div class="loadingPosts">
<div class="loadingSpinner"></div>
</div>
<div class="loadedPosts">
<card class="sorts">
<button onclick="sortPostsBy('newest');" aria-label="@Newest" class="sort sortNewest"><icon aria-hidden="true">new_releases</icon> <span>@Newest</span></button>
<button onclick="sortPostsBy('best');" aria-label="@Best" class="sort sortBest"><icon aria-hidden="true">bar_chart</icon> <span>@Best</span></button>
</card>
</div>
<div class="noPosts pageMessage middle">
<div class="userIsMe">
<h1>@Nothing to show off yet!</h1>
<p>@The world's waiting to see what you can make! Write a post or comment in a group that you're part of and it'll show here too.</p>
<button onclick="visitSubmitPost();" class="blue">@Write a post</button>
</div>
<div class="userIsNotMe">
<h1>@What a mystery...</h1>
<p>@This user hasn't posted or commented on anything yet! Come back later when they've made something to share.</p>
<button onclick="window.location.href = '/';" class="blue">@Go home</button>
</div>
</div>
<div class="pageNonExistent pageMessage middle">
<div class="signedIn">
<h1>@Who is this?!</h1>
<p>@No-one exists with this username. If you're looking for someone in particular, make sure that you typed in the username correctly!</p>
<button onclick="window.location.href = '/';" class="blue">@Go home</button>
</div>
<div class="signedOut">
<h1>@Who is this?!</h1>
<p>@No-one exists with this username. If you like the username, feel free to create an account with it!</p>
<button onclick="showSignUpDialog();" class="blue">@Sign up</button>
</div>
</div>
</section>
<section class="posts" data-location="^notifications$"> <!-- Notifications page -->
<div class="signedIn">
<div class="tabs">
<div class="tabstrip">
<button class="selected" data-tab="unread">@Unread</button>
<button data-tab="archive">@Archive</button>
<button data-tab="messages">@Messages</button>
</div>
<div class="tabcontents giveMarginTop" id="submitType">
<div data-tab="unread" id="unreadNotificationsTab">
<div class="loadingSpinner"></div>
<div class="unreadNotifications"></div>
<div class="notificationsNotEnabled">
<card>
<h2>@Never miss a message</h2>
<p>@Enable push notifications to keep updated when you're not on the site</p>
<div class="buttonRow">
<button onclick="enablePushNotifications();" class="blue">@Enable</button>
</div>
</card>
</div>
</div>
<div data-tab="archive" id="archivedNotificationsTab">
<div class="loadingSpinner"></div>
<div class="archivedNotifications"></div>
</div>
<div data-tab="messages" id="messagesTab">
<div class="loadingSpinner"></div>
<div class="messageDms"></div>
</div>
</div>
</div>
</div>
<div class="signedOut middle">
<div class="pageMessage">
<h1>@Sign in to see your notifications</h1>
<p>@To catch up with all of your messages and replies, please sign in.</p>
<button onclick="showSignInDialog();" class="blue">@Sign in</button>
</div>
</div>
</section>
<section class="posts" data-location="^dm$"> <!-- DM page -->
<div class="signedIn">
<div class="loadingDm">
<div class="loadingSpinner"></div>
</div>
<div class="loadedDm">
<div class="pageExistent">
<h1 class="dmHeader"></h1>
<div class="dmMessages"></div>
<div class="dmReplyContainer">
<div class="contentEditor" id="dmMessageReply"></div>
<div class="buttonRow">
<button onclick="sendDmMessage();" class="blue">@Send</button>
<button onclick="window.history.back();">@Cancel</button>
</div>
<p class="errorMessage" id="sendDmMessageError"></p>
</div>
</div>
</div>
<div class="pageNonExistent">
<div class="pageMessage middle">
<h1>@This user does not exist...</h1>
<p>@Check to see if you entered the right username in the URL.</p>
<button onclick="window.location.href = '/notifications';" class="blue">@View notifications</button>
</div>
</div>
<div class="selfMessaging">
<div class="pageMessage middle">
<h1>@Talking to yourself?!</h1>
<p>@You can't send messages to yourself ─ only to other people.</p>
<button onclick="window.location.href = '/notifications';" class="blue">@View notifications</button>
</div>
</div>
</div>
<div class="signedOut middle">
<div class="pageMessage">
<h1>@Sign in to send and receive messages</h1>
<p>@You need a Glipo account in order to privately message users.</p>
<button onclick="showSignInDialog();" class="blue">@Sign in</button>
</div>
</div>
</section>
<section class="posts" data-location="^settings$"> <!-- Settings page -->
<div class="signedIn">
<div class="loadedUser">
<div class="tabs">
<div class="tabstrip">
<button class="selected" data-tab="general">@General</button>
<button data-tab="safety">@Safety</button>
<button data-tab="about">@About</button>
</div>
<div class="tabcontents giveMarginTop">
<div data-tab="general" class="settingsSheet">
<h2>@Your profile</h2>
<label>
<span>@Username</span>
<input data-property="username" class="settingsPersonalProperty">
</label>
<p class="itemDescription">@Your username cannot be changed, but the casing of the letters in it can be changed.</p>
<label>
<span>@Bio</span>
<textarea placeholder="@Write a brief description about yourself to show on your profile..." maxlength="200" data-property="bio" class="settingsPersonalProperty"></textarea>
</label>
<p class="errorMessage" id="settingsProfileError"></p>
<div class="buttonRow">
<button onclick="savePropertyType('settingsPersonalProperty', _('Saving...'));" class="blue">@Save</button>
</div>
<h2>@Account security</h2>
<label>
<span>@Current password</span>
<input type="password" placeholder="@(Unchanged)" id="settingsCurrentPassword">
</label>
<label>
<span>@New password</span>
<input type="password" id="settingsNewPassword">
</label>
<p class="errorMessage" id="changePasswordError"></p>
<div class="buttonRow">
<button onclick="changePassword();" class="blue" id="changePasswordButton">@Change password</button>
</div>
<h2>@Delete your account</h2>
<p>@When you delete your account, your profile will be removed. Your posts and comments will still be visible to others, but your username will not be shown.</p>
<p>@You may want to delete your posts and comments first before deleting your account.</p>
<button onclick="showDeleteAccountDialog();">@Delete account</button>
</div>
<div data-tab="safety" class="settingsSheet">
<h2>@Blocked users</h2>
<p>@Messages and replies sent by the users listed below will not be shown in your notifications.</p>
<div class="blockedUsers"></div>
<div class="loadingBanStatus">
<div class="loadingSpinner"></div>
</div>
<div class="hasBan">
<h2>@Account status</h2>
<p class="banStatus">@You are currently banned from using Glipo.</p>
<p>@For more information about your ban, check the messages that were sent to you from u/modbot.</p>
<button onclick="window.location.href = '/appeal';" class="blue">@Appeal ban</button>
</div>
<div class="hasNoBan">
<h2>@Account status</h2>
<p>@There are currently no active bans on your Glipo account.</p>
</div>
</div>
<div data-tab="about">
<div class="middle">
<img src="/media/largeWhite.png" alt="" class="aboutLogo" />
<h2>@Glipo Web Frontend</h2>
<p>@Connecting communities through the internet</p>
<p>@Made with ❤️ in Norwich, England</p>
<button onclick="window.location.href = '/about';">@About us</button>
</div>
</div>
</div>
</div>
</div>
<div class="loadingUser">
<div class="loadingSpinner"></div>
</div>
</div>
<div class="signedOut">
<div class="pageMessage middle">
<h1>@Sign in to manage your Glipo account's settings</h1>
<p>@You'll need to sign in with a Glipo account to modify its settings.</p>
<button onclick="showSignInDialog();" class="blue">@Sign in</button>
</div>
</div>
</section>
<section class="posts" data-location="^staff$"> <!-- Staff page -->
<div class="signedIn">
<div class="isStaff">
<div class="tabs">
<div class="tabstrip">
<button class="selected" data-tab="modqueue">@Modqueue</button>
<button data-tab="reports">@Reports</button>
<button data-tab="staff">@Staff members</button>
</div>
<div class="tabcontents giveMarginTop">
<div data-tab="modqueue" id="staffModqueue">
<div class="loadingSpinner"></div>
<div class="modqueueItems"></div>
</div>
<div data-tab="reports" id="staffReports">
<div class="loadingSpinner"></div>
<div class="staffReportItems"></div>
</div>
<div data-tab="staff" id="staffMembers">
<div class="loadingSpinner"></div>
<div class="staffMemberList"></div>
</div>
</div>
</div>
</div>
<div class="isNotStaff">
<div class="pageMessage middle">
<h1>@You must be a member of staff at Glipo to access the staff area</h1>
<p>@Only staff members can access the staff area.</p>
<button onclick="window.location.href = '/';" class="blue">@Go home</button>
</div>
</div>
</div>
<div class="signedOut">
<div class="pageMessage middle">
<h1>@Sign in to access the staff area</h1>
<p>@If you are a member of staff, please sign in with your staff account.</p>
<button onclick="showSignInDialog();" class="blue">@Sign in</button>
</div>
</div>
</section>
<section class="posts" data-location="^creategroup$"> <!-- Create a group page -->
<div class="signedIn">
<div class="loadingUserDetails">
<div class="loadingSpinner"></div>
</div>
<div class="canCreateGroups">
<h1>@Create a group</h1>
<h2 class="step">@1. Choose a group name</h2>
<card dir="ltr" class="createGroupName">
<span>g/</span>
<input placeholder="@groupname" id="createGroupNameInput">
</card>
<p class="createGroupNamePrompt">@The group name must be between 3-20 characters long, and must only contain lowercase and uppercase letters as well as numbers.</p>
<h2 class="step">@2. Write a brief description of your group</h2>
<textarea id="createGroupDescriptionInput" placeholder="@Write something here that will entice people to your group..." maxlength="200"></textarea>
<p>@The group description will appear just below the group name and can only be a maximum of 200 characters long.</p>
<h3 class="step">@3. Do the honours</h3>
<p>@It's time for you to press the magic button! Check that everything above is correct, then press the button below to create your group.</p>
<button onclick="createGroup();" class="blue" id="createGroupButton">@Create group</button>
<p class="errorMessage createGroupError"></p>
</div>
<div class="cannotCreateGroups">
<div class="pageMessage middle">
<h1>@You'll need at least 100 points to create a group</h1>
<p>@We require our users to have a sufficient amount of points in order to create a group. This is to prevent spam and to ensure that users are fit to moderate their own groups.</p>
<p>@Want to get more points? Try writing a post!</p>
<button onclick="visitSubmitPost();" class="blue">@Write a post</button>
</div>
</div>
</div>
<div class="signedOut">
<div class="pageMessage middle">
<h1>@Sign in to create your own group</h1>
<p>@You need a Glipo account with at least 100 points in order to create a group.</p>
<button onclick="showSignInDialog();" class="blue">@Sign in</button>
</div>
</div>
</section>
<section class="posts" data-location="^banned$"> <!-- Ban page -->
<div class="pageMessage middle">
<h1>@Sorry, you cannot do that</h1>
<p class="banMessage">@We don't know why you're here! Please try visiting Glipo again later.</p>
<button onclick="window.location.href = '/appeal';" class="blue">@Appeal ban</button>
</div>
</section>
<section class="posts" data-location="^appeal$"> <!-- Ban page -->
<div class="signedIn">
<h1>@Appeal a ban</h1>
<p>@If you've recently been banned from participating on Glipo and you feel that the ban was made in error, fill in this form to submit a ban appeal. A member of Glipo's staff will then assess your ban appeal request and may lift the ban that was put in place.</p>
<p>@If you were banned from participating in a particular group, please instead message the relevant group moderators as this ban appeal form is only used for appealing site-wide bans.</p>
<p>@In some cases, Glipo's staff may find that their decision to ban you was final. Submitting this ban appeal form does not guarantee that your ban will be lifted.</p>
<div class="loadingBanStatus">
<div class="loadingSpinner"></div>
</div>
<div class="hasBan">
<h2>@Account status</h2>
<p class="banStatus">@You are currently banned from using Glipo.</p>
<p>@For more information about your ban, check the messages that were sent to you from u/modbot.</p>
<div class="canSubmitBanAppeal">
<h2>@Appeal details</h2>
<p>@Tell us why you think we should lift your ban below.</p>
<textarea placeholder="@Explain why you think we banned you in error here..." id="appealSubmitReason"></textarea>
<label><input type="checkbox" id="appealAccept"></input><span>@I promise not to violate the rules of Glipo's Content Policy again and I am sorry for any inconvenience that I have caused towards Glipo's staff</span></label>
<div class="end buttonRow">
<button onclick="submitAppeal();" class="blue appealSubmitButton">@Submit</button>
<button onclick="window.history.back();">@Cancel</button>
</div>
<p class="errorMessage" id="appealSubmitError"></p>
</div>
<div class="cannotSubmitBanAppeal">
<p class="errorMessage">@Sorry, you cannot submit a ban appeal because the decision to ban you was determined by Glipo's staff to be final.</p>
</div>
</div>
<div class="hasNoBan">
<h2>@Account status</h2>
<p>@There are currently no active bans on your Glipo account, and so you do not need to submit an appeal at this time.</p>
</div>
</div>
<div class="signedOut">
<div class="pageMessage middle">
<h1>@Sign in to appeal a ban</h1>
<p>@We'll need you to sign in with the account that you received the ban from so that you can appeal it.</p>
<button onclick="showSignInDialog();" class="blue">@Sign in</button>
</div>
</div>
</section>
<aside id="sidebar">
<span class="signedOut">
<card data-location="^g\/[^\/]+$|^\/$">
<h1>@Welcome to Glipo</h1>
<p>@Glipo is a social network where you can discover your community through our groups.</p>
<button onclick="showSignUpDialog();" class="big blue">Sign up</button>
</card>
</span>
<span class="loadedTrendingGroups">
<card data-location="^\/$">
<h2>@Trending groups</h2>
<div class="trendingGroups"></div>
</card>
</span>
<span class="canCreateGroups">
<card data-location="^\/$">
<h1>@Want a group of your own?</h1>
<p>@You're now eligible to start your own groups! Let people discover your very own community.</p>
<button onclick="window.location.href = '/creategroup';" class="big blue">@Create a group</button>
</card>
</span>
<span class="pageExistent">
<card data-location="^g\/[^\/]+$">
<h2>@About this group</h2>
<p><strong class="groupMemberCount">@{0} members|---</strong></p>
<p class="groupPostCount">@{0} posts|---</p>
<p class="groupCommentCount">@{0} comments|---</p>
<button onclick="toggleGroupMembership();" class="big blue groupJoinButton">@Join</button>
<span class="signedIn">
<span class="isModerator">
<button onclick="visitModeratorTools();" class="big">@Moderator tools</button>
</span>
<span class="isNotModerator">
<button onclick="visitModmailSender();" class="big">@Message moderators</button>
</span>
</span>
</card>
<card data-location="^g\/[^\/]+\/posts\/[^\/]+$">
<h2 class="postGroupHeader"></h2>
<p class="postGroupDescription"></p>
<button onclick="toggleGroupMembership();" class="big blue groupJoinButton">@Join</button>
<button onclick="visitGroup();" class="big">@Visit group</button>
</card>
<card data-location="^g\/[^\/]+\/modtools$">
<h2 class="groupName"></h2>
<p class="groupDescription"></p>
<button onclick="modVisitGroup();" class="big">@Visit group</button>
<button onclick="modVisitSettings();" class="big">@Settings</button>
</card>
<card data-location="^g\/[^\/]+\/settings$">
<h2 class="groupName"></h2>
<button onclick="modVisitGroup();" class="big">@Visit group</button>
<button onclick="visitModeratorTools();" class="big">@Moderator tools</button>
</card>
<card data-location="^g\/[^\/]+\/modmail$">
<h2 class="groupName"></h2>
<p class="groupDescription"></p>
<button onclick="toggleGroupMembership();" class="big blue groupJoinButton">@Join</button>
<button onclick="modVisitGroup();" class="big">@Visit group</button>
</card>
<span class="hasRules">
<card data-location="^g\/[^\/]+$|^g\/[^\/]+\/posts\/[^\/]+$">
<h2>@Group rules</h2>
<div class="groupRules"></div>
</card>
</span>
<card data-location="^u\/.*$">
<h2><strong class="userUsername"></strong></h2>
<p><strong class="userStaffTitle"></strong></p>
<p>
<span class="userBio"></span>
<span class="userIsMe">
<a href="/settings" class="userBioEditLink">@Edit</a>
</span>
<p title="@This message was added by a member of Glipo staff." class="errorMessage userStaffCommentary"></p>
</p>
<p class="userJoinDate">@Joined {0}|---</p>
<p>
<strong class="userPoints">@{0} points|---</strong>
<span>·</span>
<span class="userPostCount">@{0} posts|---</span>
<span>·</span>
<span class="userCommentCount">@{0} comments|---</span>
</p>
<div class="userIsNotMe">
<button onclick="visitUserMessages();" class="big blue">@Send message</button>
</div>
</card>
<span class="donorInfo">
<card>
<p class="donorSince">@Glipo donor</p>
</card>
</span>
</span>
<card data-location="^submit$">
<h2>Community guidelines</h2>
<details>
<summary>@1. Think before you post</summary>
<p>
@Before pressing the submit button, give yourself a
few seconds to think whether the actions you're
taking will be beneficial and useful to others on
Glipo.