-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
778 lines (702 loc) · 46.2 KB
/
index.html
File metadata and controls
778 lines (702 loc) · 46.2 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no, maximum-scale=1">
<meta name="keywords" content="Impera, Social kickstarter, social crowdfunding">
<meta name="description" content="iMPERA.io - Join a community of enthusiasts and help fund world-changing projects to reality">
<meta name="og:site_name" content="Impera">
<meta name="twitter:card" content="https://impera.onrender.com/img/">
<meta name="twitter:title" content="Impera.io">
<meta name="twitter:description" content="A community of enthusiasts and startups, connecting ideas and making them a reality">
<meta name="twitter:site" content="@CSS">
<meta name="twitter:creator" content="@oruko_mi">
<meta name="twitter:image" content="https://impera.onrender.com/img/im.svg">
<title>Impera.io</title>
<script type="text/javascript" src="https://impera.onrender.com/theme.js"></script>
<link rel="preload" href="https://impera.onrender.com/img/loading.svg" as="image">
<link rel="preload" href="https://impera.onrender.com/img/im.svg" as="image"/>
<link rel="icon" href="https://impera.onrender.com/img/im.svg" sizes="any">
<link rel="preload" href="Fonts/CaviarDreams.ttf" as="font"/>
<link rel="preload" href="Fonts/sofiapro-light.otf" as="font"/>
<link rel="preload" href="Fonts/Neou-Bold.ttf" as="font"/>
<style>
*{
font-family: 'Courier New', Courier, monospace;
}
@font-face {
font-family: unz;
src: url("https://impera.onrender.com/Fonts/sofiapro-light.otf");
}
@font-face {
font-family: caviar;
src: url("https://impera.onrender.com/Fonts/CaviarDreams.ttf");
}
@font-face {
font-family: norm;
src: url("https://impera.onrender.com/Fonts/Neou-Bold.ttf");
}
@font-face {
font-family: uns;
src: url("https://impera.onrender.com/Fonts/Inconsolata-Regular.ttf");
}
*{
font-family: unz;
box-sizing: border-box;
color: var(--sec);
}
</style>
<link rel="stylesheet" href="https://impera.onrender.com/cssl/croppie.css">
<link rel="preload" href="https://impera.onrender.com/css/style.css" as="style"/>
<link rel="preload" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" as="style"/>
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="https://impera.onrender.com/css/style.css">
<!-- Theme included stylesheets -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
<link href="https://impera.onrender.com/css/editor.css" rel="stylesheet"/>
<!-- Moralis SDK code -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis-v1@1.12.0/dist/moralis.js"></script>
<script>
//If user is online, sync Moralis
// connect to Moralis server
const appId = "001";
const serverUrl = "https://dbserver-xebq.onrender.com/server";
Moralis.initialize(appId);
Moralis.serverURL = serverUrl;
Moralis.start({serverUrl, appId});
(async function(){
const cusver = await Moralis.User.current();
if(!cusver){
location.assign('auth?redirect='+location.href);
}
else{
const query = new Moralis.Query('users');
query.equalTo('user', cusver.id);
const results = await query.first();
if(!results) location.assign('auth?redirect='+location.href)
}
})()
function changeTheme(params){
if(ls.getItem('theme') == 'light'){ls.setItem('theme', 'dark'); themeaton()}
else{ls.setItem('theme', 'light'); themeaton()}
}
//let globalid;
//(async function(){globalid = await Moralis.User.current().id;})();
const globalid = Moralis.User.current().get('username');
</script>
<script></script>
<!-- Main Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
</head>
<body id="renderAll" onload="done()">
<div id="loader" class="loaders">
<div class="sonl"><object width="50px" type="image/svg+xml" data="https://impera.onrender.com/img/loading.svg"></object></div>
<p id="tebe" style="color:var(--sec)"></p>
</div>
<div id="startscreen"><!--A simple animation for loading... most likely the app logo-->
<img width="100px" height="100px" id="logo" src="https://impera.onrender.com/img/im.svg" class="logo"/>
<!--div id="techused"><i class="la la-plus"></i></div-->
<div id="allmsk"><object width="50px" type="image/svg+xml" data="https://impera.onrender.com/img/loading.svg"></object></div>
</div>
<div id="cropperx">
<button id="destroyer" class="actions acol3 la la-times"></button>
<div id="inna"></div>
<div id="controls"><button id="rotatel" class="actions acol2 las la-undo-alt"></button><button id="rotater" class="actions acol2 las la-redo-alt"></button><button id="crop-done" class="specialb"><p>Crop</p></button></div>
</div>
<div id="column1-2" class="gjs-row">
<div id="searchbox">
<div id="searchtop">
<object width="50px" type="image/svg+xml" data="https://impera.onrender.com/img/loading.svg"></object>
</div>
<div id="searchbody">
<!--ALL Search are appended here-->
</div>
</div>
<div id="suui">
<div class="filler"></div>
<div style="display: flex; width: 100%; align-items: center; flex-flow: column nowrap; gap: 30px;"><img class="logo" width="30px" style="cursor: pointer;" onclick="openmenu()" src="https://impera.onrender.com/img/im.svg"/><div class="underp" id="selfpro" onclick="openuser('self');"><img id="usicon" src="https://impera.onrender.com/img/profile2.jpg"/></div>
<div id="sparent2" class="input-box"><input autocomplete="off" maxlength="30" id="sany2" oninput="search()" onfocus="searchfocused('x'); pfocused(this)" onblur="searchblurred('x'); offfocused(this)" placeholder="Search @users and $$projects..." spellcheck="false" type="text" name="search-anything" data-title="search stuffs" class="slicki" style="z-index: 2;"/><button class="gtext la la-search" style="z-index: 2; font-size: 20px;" onclick="preventDefault(this); search(); return false"></button></div>
</div>
<div id="largexx" onclick="closemenu()">
<div id="homeos" class="ersd acol5 mol" onclick="opentab('home')"><button class="la la-home"></button><p class="b2text">Home</p></div>
<div class="ersd acol3 mol" onclick="opentab('ibczo-2')"><button class="la la-feather"></button><p class="b2text">Posts</p></div>
<div class="ersd acol4 mol" onclick="opentab('iht7k')"><button class="la la-hashtag"></button><p class="b2text">Projects</p></div>
<!--div class="ersd acol3" onclick="opendialog('events')"><button class="la la-calendar-alt"></button><p class="b2text">Events</p></div-->
<!--div class="ersd acol3 mol" onclick="opentab('messaging')"><button class="las la-comments"></button><p class="b2text">Messages</p></div-->
<div class="ersd acol1" onclick="opendialog('notifs')"><button class="la la-bell"></button><p class="b2text">Notifications</p></div>
<div class="ersd acol2" onclick="changeTheme()"><button class="las la-adjust"></button><p class="b2text">Toggle theme</p></div>
<!--div class="ersd acol4"><button class="acolg las la-magic"></button><p class="gtext b2text">Surprise Me!</p></div-->
<div class="ersd acol8" onclick="logout()"><button class="acol8 las la-power-off"></button><p class="acol8 b2text">Logout</p></div>
</div>
<a id="gitme" titlex="our organization" href="https://github.com/3novix" style="width: 40px; height: 40px; min-height: 40px; background-size: 40px 40px;" target="_blank"></a>
</div>
<div id="home" class="rblocks">
<div class="glassy-top topin">
<div><img class="menubtn" onclick="openmenu()" height="30px" src="https://impera.onrender.com/img/im.svg"></div>
<p class="gtext largeps" style="height: 40px; line-height: 40px;">Home</p>
</div>
<div id="keeperx" class="column center" style="width: 100%; height: 100%;">
<object width="50px" type="image/svg+xml" data="https://impera.onrender.com/img/loading.svg"></object>
</div>
<div id="homestuffs" class="column" style="display:none; width: 100%;">
<div class="filler"></div>
<div id="hppah" class="column center" style="gap: 20px;">
<div class="underp"><img id="hppa" src="https://impera.onrender.com/img/profile2.jpg" titlex="My profile pic" alt="My profile pic"></div>
<div class="row center" style="gap: 5px;">
<span id="hmyname"></span>
<span id="hmyusername" class="gtext"></span>
</div>
<button onclick="openuser(globalid)" class="snapb" style="height: 45px;"><span>View profile</span></button>
</div>
<div class="section-title"><h2>New Users</h2></div>
<div class="row" style="gap: 20px; width: 100%; overflow: scroll;">
<div id="newerusers" class="row" style="width: 100%; padding: 10px 10px; width: 100%; gap: 10px;"></div>
</div>
<div class="section-title" ><h2 onclick="opentab('ibczo-2')">Recent Posts</h2></div>
<div id="rentposts" class="row" style="gap: 20px;">
</div>
<div style=" padding: 0px 10px; margin-top: 10px;">
<div style="height:560px; background-color: #1D2330; overflow:hidden; box-sizing: border-box; border: 1px solid #282E3B; border-radius: 4px; text-align: right; line-height:14px; font-size: 12px; font-feature-settings: normal; text-size-adjust: 100%; box-shadow: inset 0 -20px 0 0 #262B38;padding:1px;padding: 0px; margin: 0px; width: 100%;"><div style="height:540px; padding:0px; margin:0px; width: 100%;"><iframe src="https://widget.coinlib.io/widget?type=chart&theme=dark&coin_id=145&pref_coin_id=1505" width="100%" height="536px" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" border="0" style="border:0;margin:0;padding:0;line-height:14px;"></iframe></div><div style="color: #626B7F; line-height: 14px; font-weight: 400; font-size: 11px; box-sizing: border-box; padding: 2px 6px; width: 100%; font-family: Verdana, Tahoma, Arial, sans-serif;"><a href="https://coinlib.io" target="_blank" style="font-weight: 500; color: #626B7F; text-decoration:none; font-size:11px">Cryptocurrency Prices</a> by Coinlib</div></div>
</div>
<!--div class="section-title"><h1>Wallet</h1></div-->
<div class="filler" style="display: block;"></div>
</div>
</div>
<div id="usertab" class="gjs-cell rblocks">
<div class="innerblock">
<div class="innbb">
<!--Contains stuffs related to tabs opened-->
</div>
<div class="innbb rlborder" style="position: relative;">
<div id="top-mobile" class="glassy-top">
<img alt="impera logo" width="30px" style="z-index: 3;" onclick="openmenu()" src="https://impera.onrender.com/img/im.svg">
</div>
<div id="lscreen" class="column center">
<object width="50px" type="image/svg+xml" data="https://impera.onrender.com/img/loading.svg"></object>
</div>
<div id="usersstuffs">
<div id="editbtn" class="row" style="justify-content: end; height: 50px; display: none;"><button onclick="openeditor()" title="edit profile" class="actions acol7 las la-pen-alt"></button></div>
<div id="userstop">
<div class="underp"><img id="profiimg" class="pfplarge" titlex="View image" src="https://impera.onrender.com/img/profile2.jpg" alt="placeholder"/></div>
<div style="width: 100%; display:flex; flex-direction: row; justify-content: space-evenly;"><p id="usersname"></p><p id="usersusername" style="cursor: pointer; outline: none; border:none" class="gtext"></p></div>
<div style="width: 100%; height: 60px; align-items: center; justify-content: center; display: flex;"><div class="malf"><button title="click to copy" onclick="WalletView();" id="usereth" class="invertio"><p id="wareti"></p></button></div></div>
</div>
<p style="width: 100%; text-align: center; font-size: 14px; line-height: 20px;">User Since <span class="col1" id="usersince"></span></p>
<div id="usersmid">
<div class="ffl">
<div id="i2ag" class="nnuy">
<p id="backers" class="numc col2"></p>
<p class="ntext">Backers</p>
<span class="hdivider full" style="height: 3px; background: var(--grad4);"></span>
</div>
<div id="ipl6i" class="nnuy">
<p id="backings" class="numc col2"></p>
<p class="ntext">Backing</p>
<span class="hdivider full" style="height: 3px;"></span>
</div>
</div>
<div class="ffl">
<div id="ipl6i2" class="nnuy">
<p id="followingC" class="numc col1"></p>
<p class="ntext">Projects</p>
<span class="hdivider full" style="height: 3px;"></span>
</div>
</div>
<!--span class="hdivider" style="width: 60%; margin:0; margin-left:20%; background: var(--gradi); border-radius: 5px;"></span-->
</div>
<div id="usersothrs">
<!--about is the first here, then followed by the users watchlist-->
<div id="ame">
<p class="gtext">About</p>
<p id="descrip"></p>
</div>
<div id="wll">
<p style="text-align: center;" class="gtext">Watchlist</p>
<div id="wllson"></div>
</div>
<!--div id="act">
<p>Activity</p>
<div>
<button>Show Activity</button>
</div>
</div-->
</div>
</div>
<div id="editme">
<div class="row center" style="width: 100%;"><button onclick="switchviews('usersstuffs', ['editme']);" class="actions acol2 la la-times"></button></div>
<div id="edlksao" class="column center" style="gap: 10px;">
<div class="underp"><img id="lsjdo" onclick="ge('lfimg2').click()" alt="My image" titlex="My Profile Image" src="https://impera.onrender.com/img/profile2.jpg"/></div>
<div id="special2" class="special-box">
<label id="lfimg2" class="uploaders" titlex="Upload Avatar" for="newimageuploader">Upload Image</label>
<input type="file" name="upload image" title="" titlex="upload image" id="newimageuploader" accept=".jpeg, .jpg, .png, .bmp"/>
</div>
</div>
<div class="simpleinputs">
<div class="input-box">
<label for="myusername">@</label>
<input type="text" title="You haven't used this usename for up to a month" placeholder="Alicra" name="my_username" id="myusername" maxlength="12" minlength="3" style="width: 100px;" disabled>
</div>
<div class="input-box">
<label for="myname">Name</label>
<input onblur="offfocused(this)" onfocus="pfocused(this)" type="text" placeholder="Alicra" name="my_name" id="myname" maxlength="20" minlength="3" spellcheck="false" required>
</div>
<div id="aboutmeh">
<div class="input-box" style="display: flex; flex-direction:column; overflow: hidden;">
<label for="allaboutme" style="z-index: 2;">About</label>
<textarea oninput="ge('textcountme').innerHTML = (ge('allaboutme').value.length).toString()+'/100';" onblur="offfocused(this)" onfocus="pfocused(this)" id="allaboutme" style="height: 100px" maxlength="100"></textarea>
<span style="z-index: 2;" id="textcountme"></span>
</div>
</div>
</div>
<button class="snapb" onclick="savenewprofile()"><span>Save</span></button>
<div style="min-height: 30px; height: 30px; width: 10px;"></div>
</div>
<span class="filler"></span>
</div>
<div class="innbb">
</div>
</div>
</div>
<!--POSTS TAB-->
<div id="ibczo-2" class="gjs-cell rblocks">
<div class="glassy-top topin" id="wesd">
<button id="backbutton" class="actions acol4 la la-arrow-left"></button>
<p id="cups" class="gtext largeps" style="height: 40px; line-height: 40px;">Posts</p>
</div>
<div class="innerblock">
<button id="newposter" title="new post" class="classf la la-feather-alt" onclick="opendialog('writepost')"></button>
<div class="innbb fis" style="align-items: center; max-width: 350px;">
<!--CONTAINS STUFFS RELATED TO THE POSTS-->
<div class="recentzh">
<p>Recent posts by:</p>
<div id="recentuser" class="recentz"></div>
</div>
</div>
<div class="innbb rlborder">
<!--All posts will be arranged here vertically-->
<div id="postsholder">
<div id="lh1" class="loaderholder"></div>
</div>
<div id="mainpost">
<!--An Example of an opened post to see how it looks like-->
<div class="postsin">
<div class="sosmm"></div>
<div class="userstalk">
<div class="underp"><img class="posterpic" id="pimg" src="https://impera.onrender.com/img/profile2.jpg"/></div>
<span class="asl gbv" style="width: 2.5px;"></span>
<div id="rethdi" class="underp"><div id="referredto" class="projects-pic"></div></div>
</div>
<div class="mpost">
<div class="postUser"><p class="hhname" id="pname"></p><span class="hdivider"></span><p id="pusername" class="username col3"></p>
<div style="flex-grow:5; position: relative;">
<button onclick="ooca(this)" class="acol2 actions user-options la la-ellipsis-h" title="more"></button>
<div id="mops" class="moreoptions">
</div>
</div></div>
<div id="maincontents"></div>
<div class="postattachments"><div id="ertyw" class="inside"></div></div>
<div class="refered"></div>
<div><p id="tsauce" class="time"></p></div>
<div class="postActions">
<!--contains actions related to the post... i.e like, share, save and reply/comment-->
<button id="comment-butt" class="actions acol6 la la-comment" title="comment"><span class="countso"></span></button>
<button id="osxei" onclick="actions('quote', this)" title="quote" class="actions acol5 las la-quote-right"><span class="countso"></span></button>
<button id="axsxj" onclick="actions('like', this)" title="like" class="actions acol4 la la-heart"><span class="countso"></span></button>
<button id="wonwd" onclick="actions('share', this)" title="share" class="actions acol7 la la-share"></button>
</div>
</div>
</div>
<span class="hdivider" style="width: 100px;"></span>
<div id="mainbottom">
<!--contains all the comments and stuffs-->
<div class="design"><span class="asl gbv" style="width:2px"></span></div>
<div id="comments_section" style="display: flex; flex-flow: column nowrap; gap: 5px; align-items: center;"></div>
</div>
</div>
<div class="filler"></div>
</div>
<div class="innbb"></div>
</div>
</div>
<!--LAST TAB... WILL BE USED TO SHOW PROJECTS. THUS, ILL MAKE THIS A LITTLE BIGGER.. also, maybe the projects will be the hashtags, while underscore can refer to the users-->
<div id="iht7k" class="gjs-cell rblocks">
<div class="glassy-top topin">
<button id="backbutton2" onclick="switchviews('allprojs', ['overview'])" class="actions acol4 la la-arrow-left"></button>
<div id="titlep" class="gtext largeps">Projects</div>
</div>
<div class="innerblock">
<div class="innbb fis" style="max-width: 350px;">
<div class="recentzh">
<p>Recent Creators:</p>
<div id="recentcreators" class="recentz"></div>
</div>
</div>
<div class="innbb rlborder">
<div id="allprojs">
<!--ALL PROJECTS LOAD HERE-->
<div id="projectsin" class="filters">
<div id="lh2" class="loaderholder"></div>
</div>
<!--floating button for sth related to the tab-->
<button title="new project" class="classf la la-plus" onclick="opendialog('newproject')" style="bottom: 10px;"></button>
</div>
<!---REMINDER... I will make a section under project overview to show "tagged posts", this will show all posts where the project is tagged-->
<div id="overview">
<!--START OF TOP SECTION -->
<div id="firstcc">
<div id="otop"><div id="large_img"><img id="offiimg" src="https://impera.onrender.com/img/profile2.jpg"/></div>
</div>
<div id="texk">
<div style="display: flex; flex-flow: row wrap; gap: 10px; align-items: center; justify-content: center; min-width: 300px;">
<div id="large_title" class="gtext largeps">Project X</div><button id="project-id" title="copy id" name="copy id" class="col1">$$unknown</button>
</div>
<div id="fundma">
<div class="vscx"><div id="fnums" class="col2"></div><span> funded</span></div>
<div id="plisn">
<span>Goal:</span><div id="final_goal" class="flowrent fltext"></div>
<span title="completion" id="ranged"></span>
</div>
<div id="mice"><!--For showing date created and the amount its received and other status-->
<div class="vscx"><div id="nobcs" class="col1"></div><span> backers</span></div>
<div class="vscx"><div id="wachs" class="col4"></div><span> watchers</span></div>
</div>
</div>
<div style="text-align: center;"><p>Created by</p></div>
<div id="usipp">
<div id="ofrb" style="display: flex; flex-grow: 2; flex-direction: column; height: 70px; justify-content: stretch;">
<p id="namexp">unknown</p>
<p class="col2" id="usernamexp">@unknown</p>
</div>
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;"><div class="underp" id="uprr" style="width: 70px; height: 70px;" ><img style="width: 70px; height:auto" id="udhfb" height="70px" width="70px" src="https://impera.onrender.com/img/profile2.jpg"/></div></div>
</div>
<div id="cotts"><p class="gtext">Tags: </p><div id="tags-con"></div></div>
</div>
<div id="omid"><p class="gtext">Summary</p><p id="summarys"></p></div>
</div>
<!--END OF TOP SECTION-->
<div id="loaa">
<div id="moreonpr">
<button onclick="showproops()" class="relpro">More</button>
<div id="evern">
<button onclick="switchviews('pro_content', ['projects-transactions'])"><div>Content</div></button>
<button id="relpro"><div>Show posts</div></button>
<button id="loadalltrans" onclick="switchviews('projects-transactions', ['pro_content'])"><div>Transactions</div></button>
</div>
</div>
<button id="atwy" title="add to watchlist" project-id="" class="actions acol7 la la-bell" onclick="addtowl(this.getAttribute('project-id'))"></button>
<div id="socialis" link="no link">
<button title="tweet" onclick="shareproject('twitter')" class="actions acol5 la la-twitter"></button>
<button title="facebook share" onclick="shareproject('facebook')" class="actions acol5 la la-facebook" style="border-radius: 5px;"></button>
<button title="mail to" onclick="shareproject('email')" class="actions acol6 la la-envelope"></button>
<button title="copy link" onclick="shareproject('link')" class="actions acol4 las la-link"></button>
</div>
</div>
<div id="opwrapper">
<div id="pro_content" class="pro-tabs" style="display: flex;">
<!--Here I wll import the quill object as projects full description, while i read the summary for all other stuffs-->
</div>
<div id="projects-transactions" class="pro-tabs">
<!--This is for showing transactions of a project, only transactions that take place here-->
</div>
</div>
<div id="fundbox">
<div id="dersutop" style="display: none; flex-direction: row; justify-content: center; width: 100%;"><button class="actions acol2 la la-times" onclick="shrinkit()"></button></div>
<div id="ethfund" class="simpleinputs" style="display: none;">
<div id="dersu" class="input-box">
<input oninput="currcon('fundtokens', this, 'dollar')" onblur="offfocused(this);" onfocus="pfocused(this)" type="number" step="any" placeholder="$2" title="fund amount in dollars" name="fund_amount" id="fundinput" required>
<span title="usd" class="lops la la-dollar-sign"></span>
</div>
<div id="dersu2" class="input-box">
<input oninput="currcon('fundinput', this, 'erc20')" onblur="offfocused(this);" onfocus="pfocused(this)" type="number" step="any" placeholder="2 MATIC" title="fund amount in tokens" name="fund_tokens" id="fundtokens" required>
<span class="lops"><img id="kdpa" height="30px" alt="Matic"></span>
</div>
</div>
<div class="malf"><button onclick="fund()" id="fundbutton" class="invertio"><p>Fund</p></button></div>
</div>
<div id="obottom" style="font-size: 14px;"><!--contains terms and condition shit-->
<p><strong>*Fund of your own voilition</strong></p>
<p>As of the Moment of writing this, we do not collect a fee for transactions, all the amount sent will be directly received into the project's secured wallet, which only the project's creator has access to after the deadline. And therefore we do not ask for you to blame us for any financial regret you may have after your decision.</p>
<p style="color: gray; text-align: center; line-height: 50px;">Impera by <span style="color: var(--sec);">novics</span></p>
<div style="height: 50px; width: 50px;"></div>
</div>
</div>
</div>
</div>
</div>
<!--MESSAGING SECTION... COMING SOON-->
<div id="messaging" class="rblocks">
<div class="glassy-top topin"><P class="gtext largeps">Messaging</P></div>
<div id="neso" class="innerblock">
<div id="messagingmenu" class="innbb">
<h3>Chats</h3>
<div class="column" style="align-items: stretch;">
</div>
</div>
<div class="innbb rlborder" style="padding-top: 20px;">
<div id="chatview">
<div class="chatboxes left">
Coming soon
</div>
<div class="chatboxes right">
When?
</div>
<div class="chatboxes left">
I dunno, next year?
</div>
</div>
</div>
<div class="innbb">
<!--A BLANK HTML DIV-->
<div class="simpleinputs" style="background-color: var(--thread); border-radius: 20px;">
<div id="mesdsc">
<div class="input-box" style="display: flex; flex-direction:column; overflow: hidden;">
<label for="messing" style="z-index: 2;">Type</label>
<textarea onblur="offfocused(this)" onfocus="pfocused(this)" id="messing" style="height: 200px" maxlength="300"></textarea>
<span style="z-index: 2;"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="newproject" class="dialogs">
<div class="divc">
<div style="width: 100%; position: sticky; top: 0; margin-bottom: 10px; height: 55px; display: flex; flex-direction: row; justify-content: space-between;"><div style="height: 50px; line-height:50px; display: flex; flex-direction: row; gap: 10px;"><div class="underp"><img class="posterpic" id="hjkd" src="https://impera.onrender.com/img/profile2.jpg"/></div> New Project</div><button style="margin-right:10px; justify-self: flex-end;" title="close" class="actions acol2 la la-times" onclick="closedialog('newproject')"></button></div>
<div id="projectform" method="post" style="position:relative; display: flex; flex-direction: column; height: calc(100% - 55px); overflow: scroll;">
<div id="firststep">
<div style="display: flex; max-width: 1020px; width:100%; flex-flow: row wrap; gap: 10px; justify-content: space-evenly;">
<div id="mainsss">
<div id="coer" onclick="removeimg()">
<img class="gtext" height="296px" id="replacer" onclick="removeimg()" src="" style="height:auto; max-height: 300px; width: auto; max-width: 100%;" alt="project image">
</div>
<div id="special1" class="special-box">
<label for="p_image_input" titlex="Select an Image" id="lfimg" class="uploaders">Select image</label>
<input class="gtext" id="p_image_input" name="p_image" spellcheck="false" title="image for project" type="file" accept=".png, .jpg, .jpeg, .bmp, .mp4" required/>
</div>
<div style="position: absolute; bottom:-10px; color:var(--sec); font-size: 15px; opacity: 0.7;">*square images are recommended</div>
</div>
<div class="vdivider" style="align-self:stretch; height: auto; max-height: 250px;"><span style="width:2px; background-image: linear-gradient(135deg, var(--color2), var(--color1)); border-radius: 0;"></span></div>
<div id="simpleinputs" class="simpleinputs">
<div class="input-box"><label for="inppname">Title</label><input onchange="checkpra(this)" onblur="offfocused(this)" onfocus="pfocused(this)" type="text" placeholder="once upon a time" name="p_name" id="inppname" maxlength="20" minlength="3" required autofocus><span class="beauts"><div id="avail"></div></span></div>
<div id="ingib" class="input-box">
<label for="ingoaldolls">Goal</label>
<input oninput="currcon('ingoal', this, 'dollar')" onblur="offfocused(this)" onfocus="pfocused(this)" type="number" step="any" placeholder="$3150" name="p_goaldolls" id="ingoaldolls" required>
<span onclick="return false" title="ethereum" class="lops" style="margin-right: 0px;">usd</span>
</div>
<div id="ingib" class="input-box" style="align-self: flex-end; width: 250px;">
<label>~</label>
<input oninput="currcon('ingoaldolls', this, 'erc20')" onblur="offfocused(this)" onfocus="pfocused(this)" type="number" step="any" placeholder="2 MATIC" name="p_goal" id="ingoal" required>
<span onclick="return false" title="ethereum" class="lops"><img id="oplas" style="height: 30px;" src="https://impera.onrender.com/img/polygonicon.svg"/></span>
</div>
<p style="margin-top: -15px; font-size: 15px; opacity: 0.8;">Note: The goal must be reached in Dollars($)</p>
<div class="input-box" style="width: 200px;"><label for="deadline">Deadline</label><input onblur="offfocused(this)" onchange="if(this.value == '0' || this.value == ''){this.value = 1}" onfocus="pfocused(this)" type="number" minlength="1" maxlength="2" oninput="if(Number(this.value)>12){this.value = 12}else if(Number(this.value)<0){this.value = 1}else if(this.value.indexOf('e') == 'number'){this.value = 1}" max="12" min="1" value="1" name="months" id="deadline" style="width:30px; padding: 5px;" required><span style="padding-right:20px; color:var(--sec); opacity: 0.5; font-size: 14px;">months</span></div>
<div class="tags-holder">
<label style="line-height: 40px;">Select tags</label>
<!--max tags allowed should 4-->
<button class="niche" name="art" onclick="niche(this); return false;"><p>Art</p></button>
<button class="niche" name="gaming" onclick="niche(this); return false;"><p>Gaming</p></button>
<button class="niche" name="music" onclick="niche(this); return false;"><p>Music</p></button>
<button class="niche" name="design and tech" onclick="niche(this); return false;"><p>Design and Tech</p></button>
<button class="niche" name="food and farms" onclick="niche(this); return false;"><p>Food and farms</p></button>
<button class="niche" name="film" onclick="niche(this); return false;"><p>Film</p></button>
<button class="niche" name="books" onclick="niche(this); return false;"><p>Books</p></button>
<button class="niche" name="sports" onclick="niche(this); return false;"><p>Sports</p></button>
</div>
</div>
</div>
<div id="summstuffs">
<div class="input-box" style="display: flex; flex-direction:column; overflow: hidden;"><label for="sumitup" style="z-index: 2;">Summary<sup style="opacity: 0.7;"> optional</sup></label><textarea oninput="ge('textcount').innerHTML = (ge('sumitup').value.length).toString()+'/100';" onblur="offfocused(this)" onfocus="pfocused(this)" id="sumitup" style="height: 100px" maxlength="100"></textarea><span style="z-index: 2;" id="textcount"></span></div>
</div>
</div>
<div id="secondstep" style="width: 100%; height: calc(100% - 5px); overflow: scroll;">
<label for="editor" style="margin: 10px; height: 50px; line-height: 50px;">Project details</label>
<div id="omnus" style="height: calc(100% - 50px);">
<div id="editor">
<div id="toolbar"></div>
<h1>My project title...</h1>
<p>Some <strong>important</strong> information on your project</p>
<p><br></p>
</div>
</div>
<div id="inkeysb" style="margin-top: 30px;" class="input-box"><label for="inkeys">Keywords</label><input onblur="offfocused(this)" onfocus="pfocused(this)" placeholder="keyword 1,keyword 2" type="text" name="p_keys" id="inkeys"></div>
<div style="margin: 5px 5px 20px 5px; color:var(--sec); font-size: 15px; opacity: 0.7;">Search keywords, seperated by commas, this field is optional</div>
</div>
<div id="firstbar" class="byau" style="width: 100%; height:52px; display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-end">
<button type="submit" onclick="nextstep(); return false" class="specialb" style="margin-right:5px; float: right;"><p>Next</p></button>
</div>
<div id="lastbar" class="byau" style="width: 100%; height:52px; display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-end">
<button type="submit" onclick="laststep(); return false" class="specialb" style="margin-left:5px; position: absolute; justify-self: start;"><p>Back</p></button>
<button type="submit" onclick="submit_project();" class="specialb" style="margin-right:5px; float: right; justify-self: end;"><p>Create Project</p></button>
</div>
</div>
</div>
</div>
<div class="dialogs" id="privateinfod">
<div class="divc">
<div style="display: flex; height: 100%; flex-flow: column nowrap; gap: 10px; overflow: scroll; align-items: center;">
<div style="width: 100%; position: sticky; top: 0; height: 55px; display: flex; flex-direction: row; justify-content: space-between;"><div style="width: 50px; height:50px"></div><p style="height: 50px; line-height:50px;">Project's private details</p><button style="margin-right:10px; justify-self: flex-end;" class="actions acol2 la la-times" onclick="closedialog('privateinfod')"></button></div>
<div class="quotes xq"><p class="gtext" style="padding-bottom: 0;">Private key:</p><p id="prikey"></p></div>
<div class="quotes xq"><p class="gtext" style="padding-bottom: 0;">Recovery Phrase:</p><p id="mnemonics"></p></div>
<div style="opacity: 0.8; text-align: center; max-width: 1000px;">Remember to keep either of those or both safe, they'll be needed for withdrawal of funds. To learn more on importing wallets, visit <a titlex="importing wallets" href="https://metamask.zendesk.com/hc/en-us/articles/360015489331-How-to-import-an-account#:~:text=From%20your%20homepage%2C%20tap%20on,supported%20by%20the%20other%20wallet." target="_blank">importing accounts</a></div>
<div style="display: flex; flex-direction: row; gap: 10px; justify-content: center;">
<button class="snapb"><span>close</span></button>
<button class="snapb"><span>save</span></button>
</div>
</div>
</div>
</div>
<div id="wallet" class="dialogs">
<div class="divc">
<div id="toppert" class="amigs">
<div class="underp"><img id="oilnm" width="50px" height="50px" src="https://impera.onrender.com/img/profile2.jpg"/></div>
<p id="whose" style="line-height: 60px; flex-grow: 2;">Wallet</p>
<button title="close" style="margin-right:10px; float: right; justify-self: flex-end;" class="actions acol2 la la-times" onclick="closedialog('wallet')"></button>
</div>
<div class="inwall" id="mywallet">
<div class="column">
<div class="row eijrmc"><p id="myethaddress" class="col1"></p><button onclick="navigator.clipboard.writeText(ge('myethaddress').innerText)" class="actions acol7 las la-copy"></button></div>
<div id="orjfn"><a href="https://polygon.tor.us/" target="_blank">Manage Wallet</a><span onclick="howtotorus()" class="actions las la-question-circle" title="You can manage your wallet on Torus"></span></div>
</div>
<div class="nnuy" id="tokenbal">
<p id="ownedtokens" class="numc col2"></p>
<p id="currencyoftoken" class="ntext"></p>
</div>
<div>You are on: <span id="current_chain"></span></div>
<button id="switcher" class="snapb"><span>Switch to <img id="tokenIcon" class="smallicon"/></span></button>
</div>
<div class="inwall" id="viewedwallet">
<div class="column center">
<div class="row eijrmc"><p id="hiswalletadd" class="col1"></p><span class="actions acol7 la la-copy"></span></div>
<button id="vobc" class="snapb"><span>View On Blockchain</span></button>
</div>
<div class="column center">
<p style="opacity: 0.8; width: 100%; text-align: center;">Send Tip</p>
<div class="row center" style="gap: 10px;">
<button onclick="ge('tipamount').value = 1" class="snapb"><span>$1</span></button>
<button onclick="ge('tipamount').value = 2" class="snapb"><span>$2</span></button>
<button onclick="ge('tipamount').value = 4" class="snapb"><span>$4</span></button>
<button onclick="ge('tipamount').value = 5" class="snapb"><span>$5</span></button>
<button onclick="ge('tipamount').value = 10" class="snapb"><span>$10</span></button>
</div>
<div class="simpleinputs">
<div id="tipamountholder" class="input-box">
<span onclick="return false" title="dollars" class="lops la la-dollar-sign"></span>
<input oninput="currcon('equivalent', this, 'dollar')" onblur="offfocused(this);" onfocus="pfocused(this)" type="number" step="any" placeholder="1" name="p_tip_amount" id="tipamount" value="1" required>
</div>
<div id="tipamountholdereq" class="input-box" style="width: 250px; align-self: flex-end;">
<label>~</label>
<input oninput="currcon('tipamount', this, 'erc20')" onblur="offfocused(this);" onfocus="pfocused(this)" type="number" step="any" placeholder="1" name="p_tip_equivalent" value="1" id="equivalent" required>
<span class="lops"><img id="oplas3" alt="currency"/></span>
</div>
<div class="row center"><button onclick="tip()" class="specialb">Send Tip</button></div>
</div>
</div>
</div>
</div>
</div>
<div class="dialogs" id="notifs">
<div class="divc">
<div style="width: 100%; position: sticky; top: 0; height: 55px; display: flex; flex-direction: row; justify-content: space-between;">
<div style="width: 50px; height:50px"></div>
<p style="height: 50px; line-height:50px;">Notifications</p>
<button style="margin-right:10px; justify-self: flex-end;" class="actions acol2 la la-times" onclick="closedialog('notifs')"></button>
</div>
<div id="listern" class="lister">
<div class="listed"></div>
</div>
</div>
</div>
<!--Events dialog-->
<div id="events" class="dialogs">
<div class="divc">
<div id="dmmin"><button onclick="closedialog('events')" title="close" class="actions acol1 la la-times"></button></div>
<div id="chat">
<div id="messagetop"><div><img id="recipent"/><p id="rename"></p></div><button class="actions"></button></div>
<div id="messagebody"></div>
<div id="messageinputs"><input type="text" spellcheck="false" id="senderinput"/>
<div contenteditable="true"></div>
<div id="mta2"><button class="actions"></button><button class="actions"></button></div>
</div>
</div>
<div id="dmmenu">
<!--PREPEND EVENTS HERE-->
<div id="appe">
<button id="createe" onclick="newev()">Create new event</button>
<button id="closeee" onclick="closenewev()">Cancel</button>
</div>
<div id="ev"><form onsubmit="createnewevent(); return false" method="post" style="width:100%;">
<div class="input-box"><label for="ingoal">Project</label><select onblur="offfocused(this)" onfocus="pfocused(this)" type="date" name="yourprojects" id="yourprojects" required>
<!--options will be appended right after it shows this form-->
<option value=""></option>
</select></div>
<div class="input-box"><label for="ingoal">Name</label><input onblur="offfocused(this)" onfocus="pfocused(this)" type="text" name="e_name" id="event_name" required></div>
<div class="input-box"><label for="ingoal">Date</label><input onblur="offfocused(this)" onfocus="pfocused(this)" type="date" name="e_date" id="edate" required></div>
<div class="input-box"><label for="ingoal">Time</label><input onblur="offfocused(this)" onfocus="pfocused(this)" type="time" name="e_time" id="etime" required></div>
<div style="height: 50px; width:100%; display: flex; justify-content: center; align-items: center;"><button class="specialb" type="submit"><p>Create event</p></button></div>
</form></div>
</div>
</div>
</div>
<!--Dialog for a new post or comment-->
<div class="dialogs" id="writepost" style="transition: 2s;">
<div class="divc" style="overflow: scroll;">
<div id="toppert" class="amigs">
<div class="underp"><img id="iasn" width="50px" height="50px" src="https://impera.onrender.com/img/profile2.jpg"/></div>
<p id="wiww" style="line-height: 60px; flex-grow: 2;">New post</p>
<button title="close" style="margin-right:10px; float: right; justify-self: flex-end;" class="actions acol2 la la-times" onclick="closedialog('writepost')"></button>
</div>
<div id="summstuffs" style="padding:unset; ;padding-bottom: 5px;">
<div class="input-box" style="display: flex; width: 95%; flex-direction:column; overflow: hidden;">
<label for="writecontent" onclick="ge('writecontent').focus()" style="z-index: 2; height: 10px;"></label><textarea oninput="ge('writecount').innerHTML = (ge('writecontent').value.length).toString()+'/200'" onblur="offfocused(this)" onfocus="pfocused(this)" id="writecontent" maxlength="200"></textarea>
<div id="images-s"></div>
<span style="z-index: 2; padding-right: 10px; text-align: right;" id="writecount">0/200</span>
</div>
</div>
<div id="postbottomh">
<button onclick="toggleemojis()" title="emoji" class="actions acol2 las la-smile-wink" style="font-size: 20px;"></button>
<label for="attacj" id="attachb" titlex="add image.. only images are supported at the moment" class="actions acol4 la la-image">
<input max="1" title="" type="file" name="attach" id="attacj" accept=".png, .jpg, .jpeg, .bmp, .gif, .mp4"/>
</label>
<div><button id="posterre" class="specialb"><p id="eewi">Post</p></button></div>
</div>
<div id="emojiparent" style="display: none;">
<h3>Emoji <span class="las la-question-circle" style="font-size: 18px" titlex="From icons8"></span></h3>
<div id="emojibox" class="row">
<span style="display:flex; min-width: 10px; height: 10px; order: 1000;"></span>
</div>
</div>
</div>
</div>
<!--Profile card-->
<div id="profile">
<div id="profile-top"><img id="back-img"><img id="main-img"></div>
<div id="profile-mid"></div>
<div id="profile-deeds"></div>
</div>
<div id="zoomer" onclick="this.style.display ='none'"><!--TO SHOW IMAGE IN FULL SCREEN--></div>
<!--SECTION OF FLOATERS-->
<!--TABS FOR NAVIGATING ON Mobile-->
<div id="nav">
<button title="home" class="tabb la la-home" onclick="opentab('home', this)"></button>
<button title="posts" class="tabb la la-feather" onclick="opentab('ibczo-2', this)"></button>
<button title="projects" class="tabb la la-hashtag" onclick="opentab('iht7k', this)"></button>
<button title="messages" class="tabb las la-comments" onclick="opentab('messaging', this)"></button>
</div>
<div id="toaster"></div>
<div id="ttpos"><div id="tooltip"></div></div>
<div id="smalinks" class="smallpops" onclick="this.style.display = 'none'">
<button title="tweet" onclick="sharepost('twitter')" class="actions acol5 la la-twitter"></button>
<button title="facebook share" onclick="sharepost('facebook')" class="actions acol5 la la-facebook" style="border-radius: 5px"></button>
<button title="copy link" onclick="sharepost('link')" class="actions acol4 las la-link"></button>
</div>
<script src="https://unpkg.com/@web3auth/web3auth@latest/dist/web3auth.umd.min.js"></script>
<script src="https://impera.onrender.com/tools/croppie.js"></script>
<script src="https://impera.onrender.com/tools/conversion.js"></script>
<script src="https://impera.onrender.com/app.js"></script>
</body>
</html>