Izza-shahzad-13 commited on
Commit
2af83e2
Β·
verified Β·
1 Parent(s): 1a1dfc4

Delete mainscreen.html

Browse files
Files changed (1) hide show
  1. mainscreen.html +0 -1321
mainscreen.html DELETED
@@ -1,1321 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>LawSumm - Legal Summarizer</title>
7
- <link rel="icon" type="image/png" href="{{ url_for('static', filename='logo.png') }}">
8
-
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
10
- </head>
11
- <style>
12
- body, html {
13
- margin: 0;
14
- padding: 0;
15
- font-family: 'Poppins', sans-serif;
16
- color: white;
17
- text-align: center;
18
- background-color: black;
19
- overflow-x: hidden;
20
- max-width: 100%;
21
- }
22
-
23
- /* Navbar */
24
- .navbar {
25
- display: flex;
26
- justify-content: space-between;
27
- align-items: center;
28
- padding: 15px 15px;
29
- background: rgba(0, 0, 0, 0.3); /* Slight transparency */
30
- position: fixed;
31
- width: 98%;
32
- top: 0;
33
- transition: top 0.3s ease-in-out; /* Smooth animation */
34
- z-index: 1000;
35
- }
36
- .menu-toggle {
37
- display: none;
38
- font-size: 24px;
39
- cursor: pointer;
40
- }
41
-
42
- @media (max-width: 768px) {
43
- .nav-links {
44
- display: none;
45
- flex-direction: column;
46
- background: #1e1e1e;
47
- position: absolute;
48
- top: 60px;
49
- right: 0;
50
- width: 200px;
51
- text-align: left;
52
- padding: 20px;
53
- border-radius: 5px;
54
- z-index: 999; /* Ensure it's clickable */
55
- }
56
-
57
- .nav-links.show {
58
- display: flex;
59
- }
60
-
61
- /* Fix Hamburger Menu Visibility */
62
- .menu-toggle {
63
- display: block;
64
- font-size: 24px;
65
- cursor: pointer;
66
- position: absolute;
67
- top: 20px;
68
- right: 40px;
69
- z-index: 1000; /* Ensure it's clickable */
70
- }
71
- }
72
-
73
-
74
-
75
-
76
-
77
- .logo {
78
- display: flex;
79
- align-items: center;
80
- font-size: 24px;
81
- color: white;
82
- font-weight: bold;
83
- font-style: italic;
84
- }
85
-
86
- .logo img {
87
- height: 70px;
88
- width: auto;
89
- margin-right: auto;
90
- }
91
-
92
- .nav-links {
93
- list-style: none;
94
- display: flex;
95
- gap: 15px;
96
- }
97
-
98
- .nav-links li {
99
- display: inline;
100
- }
101
-
102
- .nav-links a {
103
- text-decoration: none;
104
- color: white;
105
- font-size: 20px;
106
- padding: 13px;
107
- transition: 0.3s;
108
- }
109
-
110
- .nav-links a:hover {
111
- color: #d4a373;
112
- }
113
-
114
- .auth-buttons {
115
- display: inline-block;
116
- gap: 10px;
117
- }
118
-
119
- .btn {
120
- background: none;
121
- border: 2px solid #d4a373;
122
- padding: 12px 23px;
123
- margin: auto;
124
- color: white;
125
- font-size: 16px;
126
- cursor: pointer;
127
- border-radius: 30px;
128
- transition: 0.4s;
129
- text-decoration: none;
130
- }
131
-
132
- .signup {
133
- background-color: black;
134
- border-color: #d4a373;
135
- color: white;
136
- }
137
-
138
- .signup:hover, .login:hover {
139
- background-color: #d4a373;
140
- color: white;
141
- }
142
- .login {
143
- background-color: black;
144
- border-color: #d4a373;
145
- color: white;
146
- }
147
-
148
- .login:hover {
149
- background-color: #d4a373;
150
- color: white;
151
- }
152
-
153
- .container {
154
- background: black;
155
- padding: 20px;
156
- border-radius: 10px;
157
- width: 600px;
158
- margin-top :80px;
159
- margin-left: 30%;
160
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
161
- }
162
-
163
-
164
- .upload-box {
165
- border: 2px dashed #d4a373;
166
- padding: 30px;
167
- border-radius: 10px;
168
- text-align: center;
169
- cursor: pointer;
170
- background: black;
171
- transition: 0.3s;
172
- }
173
-
174
-
175
- .upload-icon {
176
- width: 20px;
177
- opacity: 0.5;
178
- }
179
-
180
- .upload-info {
181
- font-size: 12px;
182
- color: white;
183
- }
184
-
185
- .options {
186
- display: flex;
187
- justify-content: center;
188
-
189
- margin-top: 20px;
190
- }
191
-
192
- .upload-btn {
193
- background: none;
194
- border: 2px solid #d4a373;
195
- padding: 8px 15px;
196
- margin: auto;
197
- color: white;
198
- font-size: 16px;
199
- cursor: pointer;
200
- border-radius: 30px;
201
- transition: 0.4s;
202
- }
203
-
204
- .choose-file {
205
- background: #d4a373;
206
- }
207
- .choose-file:hover{
208
- background-color: black;
209
- border-color: #d4a373;
210
- color: white;
211
- }
212
-
213
- .paste-btn {
214
- background:#d4a373;
215
- padding: 8px 20px;
216
-
217
-
218
- }
219
- .paste-btn:hover{
220
- background-color: black;
221
- border-color: #d4a373;
222
- color: white;
223
- }
224
-
225
-
226
-
227
- .upload-btn:hover {
228
- opacity: 0.8;
229
- }
230
-
231
- textarea, input[type="text"] {
232
- width: 100%;
233
- padding: 10px;
234
- border: 1px solid #ddd;
235
- border-radius: 5px;
236
- margin-top: 10px;
237
- }
238
-
239
- .submit-btn {
240
- background-color: #d4a373;
241
- border: 2px solid #d4a373;
242
- padding: 8px 10px;
243
- margin-top:25px;
244
- margin-left: 20px;
245
- color: white;
246
- font-size: 16px;
247
- cursor: pointer;
248
- border-radius: 30px;
249
- transition: 0.4s;
250
- }
251
- .submit-btn:hover{
252
- background-color: black;
253
- border-color: #d4a373;
254
- color: white;
255
- }
256
-
257
- .hidden {
258
- display: none;
259
- }
260
-
261
- textarea {
262
- width: 100%;
263
- height: 200px;
264
- padding: 10px;
265
- border: 1px solid black;
266
- background-color: #d4a373;
267
- color: white;
268
- }
269
-
270
- .summary {
271
- background-color: #d4a373;
272
- padding: 40px;
273
- padding-bottom: 10px;
274
- color: black;
275
- width: 700px;
276
- border-radius: 20px;
277
- justify-content:center;
278
- margin-left: 25%;
279
- }
280
-
281
- .highlight {
282
- background-color: yellow;
283
- font-weight: bold;
284
- }
285
-
286
- .download-btn {
287
- display: inline-block; /* Makes it a block element, placing it on a new line */
288
- background-color: #d4a373;
289
- border: 2px solid #d4a373;
290
- padding: 8px 10px;
291
- margin: 10px ; /* Centers and adds space above */
292
- color: white;
293
- font-size: 16px;
294
- cursor: pointer;
295
- border-radius: 30px;
296
- transition: 0.4s;
297
- text-align: center;
298
- text-decoration: none;
299
- }
300
-
301
- .download-btn:hover {
302
- background-color: black;
303
- border-color: #d4a373;
304
- color: white;
305
- }
306
- .button-container {
307
- text-align: center;
308
- margin-top: 30px; /* Adds space between summary and button */
309
- }
310
-
311
- .summarization-container {
312
- margin-bottom: 20px;
313
- }
314
- /* Heatmap Container */
315
- .heatmap-container {
316
- width: 100%;
317
- max-width: 100%;
318
- display: flex;
319
- justify-content: center;
320
- align-items: center;
321
- overflow-x: auto; /* Allow horizontal scrolling if needed */
322
- padding: 50px;
323
- }
324
-
325
- /* Heatmap Image */
326
- .heatmap-img {
327
- max-width: 100%; /* Ensures it never overflows */
328
- height: auto; /* Keeps aspect ratio */
329
- border-radius: 5px;
330
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
331
- }
332
-
333
- /* Responsive Adjustments */
334
- @media screen and (max-width: 768px) {
335
- .heatmap-container {
336
- padding: 10px;
337
- }
338
-
339
- .heatmap-img {
340
- width: 100%; /* Make it fully stretch on smaller screens */
341
- }
342
- }
343
-
344
- /* Floating Chatbot Icon */
345
- @keyframes pulse {
346
- 0% { box-shadow: 0 0 10px rgba(196, 154, 108, 0.8); }
347
- 50% { box-shadow: 0 0 20px rgba(196, 154, 108, 1); }
348
- 100% { box-shadow: 0 0 10px rgba(196, 154, 108, 0.8); }
349
- }
350
-
351
- @keyframes bounce {
352
- 0%, 100% { transform: translateY(0); }
353
- 50% { transform: translateY(-5px); }
354
- }
355
-
356
- .chatbot-icon {
357
- position: fixed;
358
- bottom: 80px;
359
- right: 20px;
360
- background: #c49a6c;
361
- border-radius: 50%;
362
- width: 60px;
363
- height: 60px;
364
- display: flex;
365
- justify-content: center;
366
- align-items: center;
367
- cursor: pointer;
368
- font-size: 28px;
369
- color: white;
370
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
371
- transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
372
- animation: pulse 1.5s infinite alternate, bounce 2s infinite;
373
- }
374
- .chatbot-icon.fixed {
375
- position: absolute; /* Changes from fixed to absolute */
376
- }
377
-
378
- /* Stop animation class */
379
- .stop-animation {
380
- animation: none;
381
- }
382
-
383
- .chatbot-icon:hover {
384
- transform: scale(1.2);
385
- box-shadow: 0 0 30px rgba(196, 154, 108, 1);
386
- }
387
-
388
- /* Chat Container */
389
- .chat-container {
390
- position: fixed;
391
- bottom: 100px; /* Adjust height above footer */
392
- right: 20px;
393
- width: 350px;
394
-
395
- background: #1a1a1a;
396
- border-radius: 10px;
397
- box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
398
- overflow: hidden;
399
- display: none; /* Initially hidden */
400
- }
401
- .hidden {
402
- display: none;
403
- }
404
-
405
- /* Chat Header */
406
- .chat-header {
407
- background: #c49a6c;
408
- padding: 10px;
409
- text-align: center;
410
- font-size: 13px;
411
- font-weight: bold;
412
- color: #fff;
413
- display: flex;
414
- justify-content: space-between;
415
- align-items: center;
416
- }
417
-
418
- /* Close Button */
419
- .close-btn {
420
- background: none;
421
- border: none;
422
- font-size: 20px;
423
- color: white;
424
- cursor: pointer;
425
- }
426
-
427
- /* Chat Box */
428
- .chat-box {
429
- height: 350px;
430
- overflow-y: auto;
431
- padding: 15px;
432
- display: flex;
433
- flex-direction: column;
434
- }
435
-
436
- .chat-box::-webkit-scrollbar {
437
- width: 5px;
438
- }
439
-
440
- .chat-box::-webkit-scrollbar-thumb {
441
- background: #555;
442
- border-radius: 5px;
443
- }
444
-
445
- .bot-message, .user-message {
446
- max-width: 75%;
447
- padding: 10px;
448
- margin: 5px 0;
449
- border-radius: 10px;
450
- font-size: 14px;
451
- }
452
-
453
- .bot-message {
454
- align-self: flex-start;
455
- background: #333;
456
- color: #fff;
457
- }
458
-
459
- .user-message {
460
- align-self: flex-end;
461
- background: #c49a6c;
462
- color: #fff;
463
- }
464
-
465
- /* Chat Input */
466
- .chat-input {
467
- display: flex;
468
- padding: 10px;
469
- background: #121212;
470
- }
471
-
472
- .chat-input input {
473
- flex: 1;
474
- padding: 10px;
475
- border: none;
476
- background: #1f1f1f;
477
- color: #fff;
478
- border-radius: 5px;
479
- }
480
-
481
- .chat-input button {
482
- background: #c49a6c;
483
- border: none;
484
- padding: 10px 15px;
485
- cursor: pointer;
486
- color: #fff;
487
- border-radius: 5px;
488
- margin-left: 10px;
489
- }
490
-
491
- .chat-input button:hover {
492
- background: #a87d4e;
493
- }
494
- /* Floating Chat Icon */
495
- .sidebar {
496
- position: fixed;
497
- left: 0;
498
- top: 100px;
499
- width: 250px;
500
- height: 83vh;
501
- background: #c49a6c;
502
- color: white;
503
- padding: 15px;
504
- overflow-y: auto;
505
- box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
506
- font-family: Arial, sans-serif;
507
- }
508
-
509
- .sidebar h3 {
510
- text-align: center;
511
- margin-bottom: 10px;
512
- }
513
-
514
- .history-section {
515
- margin-bottom: 20px;
516
- }
517
-
518
- .history-section h4 {
519
- font-size: 16px;
520
- margin-bottom: 5px;
521
- border-bottom: 1px solid gray;
522
- padding-bottom: 5px;
523
- }
524
-
525
- .sidebar ul {
526
- list-style: none;
527
- padding: 0;
528
- }
529
-
530
- .sidebar ul li {
531
- font-size: 14px;
532
- background: #c49a6c ;
533
- padding: 10px;
534
- margin-bottom: 5px;
535
- border-radius: 5px;
536
- word-wrap: break-word;
537
- }
538
- .download-link {
539
- color: white;
540
- text-decoration: none;
541
- font-weight: bold;
542
- }
543
- .download-link:hover {
544
- text-decoration: underline;
545
- }
546
-
547
- /* Ensure main content shifts right */
548
- .container {
549
- margin-left: 30%;
550
- }
551
- /* Ensure it moves into view when opened */
552
-
553
- /* Responsive Design */
554
- /* Footer Container */
555
- .footer {
556
- background-color: black;
557
- padding: 40px 60px;
558
- display: flex;
559
- justify-content: space-between;
560
- flex-wrap: wrap;
561
- align-items: center;
562
- margin-left: 300px;
563
- }
564
-
565
- .footer-logo {
566
- display: flex;
567
- flex-direction: column; /* Stack elements vertically */
568
- align-items: center; /* Center align all items */
569
- }
570
-
571
- .footer-logo-container {
572
- display: flex;
573
- align-items: center;
574
- gap: 10px; /* Space between logo and text */
575
- }
576
-
577
- .footer-logo img {
578
- width: 70px;
579
- }
580
-
581
- .footer-logo h2 {
582
- font-size: 25px;
583
- color: white;
584
- margin: 0;
585
- }
586
-
587
- /* Social icons centered below the logo and text */
588
- .social-icons {
589
- display: flex;
590
- gap: 15px;
591
- margin-top: 10px;
592
- justify-content: left;
593
- }
594
-
595
- .social-icons a {
596
- color: white;
597
- font-size: 23px;
598
- transition: color 0.3s;
599
- }
600
-
601
- .social-icons a:hover {
602
- color: #c09b75;
603
- }
604
-
605
- .footer-links {
606
- display: flex;
607
- justify-content: space-between;
608
- flex-grow: 1;
609
- max-width: 600px;
610
- }
611
-
612
- .footer-column {
613
- margin-right: 20px;
614
- }
615
-
616
- .footer-column h3 {
617
- font-size: 18px;
618
- margin-bottom: 10px;
619
- color: white;
620
- }
621
-
622
- .footer-column a {
623
- display: block;
624
- text-decoration: none;
625
- color: white;
626
- font-size: 15px;
627
- margin-bottom: 8px;
628
- }
629
-
630
- .footer-column a:hover {
631
- color: #d4a373;
632
- }
633
-
634
- .footer-bottom {
635
- text-align: center;
636
- padding: 10px 0;
637
- font-size: 16px;
638
- background: black;
639
- margin-top: 1px;
640
- }
641
-
642
- .footer-bottom a {
643
- text-decoration: none;
644
- color: white;
645
- margin-left: 10px;
646
- }
647
- .contact-list li {
648
- font-size: 14px;
649
- display: flex;
650
- }
651
- @media (max-width: 600px) {
652
- .btn, .discover-btn, .try-summarizer {
653
- width: 30%;
654
- font-size: 14px;
655
- padding: 12px ;
656
- margin-top: 10px;
657
-
658
- }
659
- }
660
- @media (max-width: 768px) {
661
- .auth-buttons {
662
- flex-direction: row; /* Stack buttons on smaller screens */
663
- gap: 5px;
664
- width: 100%;
665
- text-align: center;
666
- }
667
-
668
-
669
- }
670
- @media (max-width: 1024px) {
671
- .container {
672
- width: 80%;
673
- margin: 100px auto;
674
-
675
- }
676
-
677
- .summary {
678
- width: 80%;
679
- margin: 60px auto;
680
- padding: 30px;
681
- }
682
-
683
- .chat-container {
684
- width: 85%;
685
- max-width: 350px;
686
- }
687
- }
688
-
689
- @media (max-width: 768px) {
690
- .container {
691
- width: 50%;
692
- margin-right: 50px;
693
- }
694
-
695
- .summary {
696
- width: 70%;
697
- padding: 25px;
698
- }
699
-
700
- .upload-btn,
701
- .paste-btn,
702
- .submit-btn,
703
- .download-btn {
704
- width: 30%;
705
- text-align: center;
706
- margin: 5px 0;
707
- }
708
-
709
- .options {
710
- flex-direction: column;
711
- align-items: center;
712
- }
713
-
714
- .chat-container {
715
- width: 90%;
716
- max-width: 320px;
717
- }
718
-
719
- .chatbot-icon {
720
- width: 40px;
721
- height: 40px;
722
- font-size: 20px;
723
- }
724
- }
725
- @media screen and (max-width: 1024px) {
726
- .container {
727
- width: 80%;
728
- }
729
- .summary {
730
- width: 80%;
731
- }
732
- }
733
-
734
- @media screen and (max-width: 768px) {
735
- .container {
736
- width: 70%;
737
- margin-top: 50px;
738
- }
739
- .summary {
740
- width: 70%;
741
- }
742
- .options {
743
- flex-direction: column;
744
- align-items: center;
745
- }
746
- .upload-btn {
747
- width: 30%;
748
-
749
- }
750
- .submit-btn {
751
- width: 30%;
752
- }
753
- }
754
-
755
- @media screen and (max-width: 480px) {
756
- .container {
757
- width: 75%;
758
- margin-top: 40px;
759
- }
760
- .summary {
761
- width: 75%;
762
- margin-top: 40px;
763
- padding: 10px;
764
-
765
- }
766
- .upload-box {
767
- padding: 20px;
768
- }
769
- }
770
-
771
- @media (max-width: 480px) {
772
- .container {
773
- width: 60%;
774
- margin: 40px auto;
775
- padding: 10px;
776
- }
777
-
778
- .summary {
779
- width: 60%;
780
- padding: 10px;
781
- }
782
-
783
- .chat-container {
784
- width: 95%;
785
- max-width: 300px;
786
- }
787
-
788
- .chat-header {
789
- font-size: 16px;
790
- }
791
-
792
- .chatbot-icon {
793
- bottom: 60px;
794
- width: 35px;
795
- height: 35px;
796
- font-size: 18px;
797
- }
798
-
799
- .chat-box {
800
- height: 350px;
801
- }
802
- }
803
- @media screen and (max-width: 768px) { /* Mobile */
804
- .sidebar {
805
- width: 100px;
806
- padding: 10px;
807
- }
808
- .sidebar h3 {
809
- font-size: 14px;
810
- }
811
- .history-section h4 {
812
- font-size: 12px;
813
- }
814
- .sidebar ul li {
815
- font-size: 12px;
816
- padding: 8px;
817
- }
818
- .container {
819
- margin-left: 120px;
820
- }
821
- }
822
-
823
- @media screen and (max-width: 480px) { /* Small mobile screens */
824
- .sidebar {
825
- width: 80px;
826
- padding: 5px;
827
- }
828
- .sidebar h3 {
829
- font-size: 12px;
830
- }
831
- .history-section h4 {
832
- font-size: 10px;
833
- }
834
- .sidebar ul li {
835
- font-size: 10px;
836
- padding: 6px;
837
- }
838
- .container {
839
- margin-left: 100px;
840
- }
841
- }
842
- /* Responsive Design */
843
- @media (max-width: 768px) {
844
- .footer {
845
- flex-direction: column; /* Stack items vertically */
846
- text-align: center;
847
- padding: 30px;
848
- }
849
-
850
- .footer-links {
851
- flex-direction: column;
852
- align-items: center;
853
- text-align: center;
854
- }
855
-
856
- .footer-column {
857
- margin-bottom: 20px;
858
- }
859
-
860
- .social-icons {
861
- justify-content: center;
862
- }
863
-
864
- .footer-bottom {
865
- font-size: 12px;
866
- }
867
- }
868
-
869
-
870
- </style>
871
- <body>
872
- <header>
873
- <nav class="navbar">
874
- <div class="logo">
875
- <img src="{{ url_for('static', filename='logo.png') }}" alt="Lawsumm logo">
876
- <strong>LawSumm</strong>
877
- </div>
878
- <ul class="nav-links">
879
- <li><a href="{{ url_for('home') }}" class="active">Home</a></li>
880
- <li><a href="{{ url_for('about') }}">About</a></li>
881
- <li><a href="{{ url_for('summarization') }}">Summarization</a></li>
882
- <li><a href="{{ url_for('contact') }}">Contact Us</a></li>
883
-
884
- </ul>
885
- <div class="auth-buttons">
886
- <a href="{{ url_for('login') }}" class="btn login">LogIn</a>
887
- <a href="{{ url_for('signup') }}" class="btn signup">SignUp</a>
888
- </div>
889
-
890
-
891
- <div class="menu-toggle">&#9776;</div>
892
- </nav>
893
- </header>
894
- <div class="container">
895
- <form id="uploadForm" action="/" method="post" enctype="multipart/form-data">
896
- <div class="upload-box" id="dropArea">
897
- <img src="{{ url_for('static', filename='cloud.png') }}" alt="Example Image">
898
-
899
- <p><strong>DRAG & DROP A FILE*</strong>,</p>
900
- <p>paste text or choose an option below</p>
901
-
902
-
903
- <!-- File Input inside Form -->
904
- <input type="file" id="fileInput" name="file" hidden>
905
- </div>
906
-
907
- <div class="options">
908
- <label for="fileInput" class="upload-btn choose-file">πŸ“ CHOOSE FILE</label>
909
- <button type="button" class="upload-btn paste-btn" id="pasteBtn">πŸ“‹ PASTE</button>
910
-
911
- </div>
912
-
913
- <!-- Hidden Textarea for Paste Option -->
914
- <textarea id="pasteText" name="pasteText" placeholder="Paste text here..." class="hidden"></textarea>
915
-
916
-
917
-
918
-
919
- <!-- Submit Button -->
920
- <button type="submit" class="submit-btn hidden">Summarize</button>
921
- </form>
922
- </div>
923
-
924
-
925
-
926
- {% if summary %}
927
- <h2>Generated Summary</h2>
928
- <div class="summary">{{ summary|safe }}</div>
929
- <div class="button-container">
930
- <a href="{{ url_for('download_summary') }}" class="download-btn">Download Summary</a>
931
- </div>
932
- {% endif %}
933
- {% if heatmap_url %}
934
- <h2>Sentence Importance Heatmap</h2>
935
- <div class="heatmap-container">
936
- <img src="{{ heatmap_url }}" alt="Sentence Importance Heatmap" class="heatmap-img">
937
- </div>
938
- {% endif %}
939
-
940
- <!-- Floating Chatbot Icon -->
941
- <div class="chatbot-icon" onclick="toggleChat()">
942
- <i class="fa fa-question"></i>
943
-
944
- </div>
945
-
946
- <!-- Chatbot Container -->
947
- <div class="chat-container" id="chatContainer">
948
- <div class="chat-header">
949
- <h2>Legal AI Assistant</h2>
950
- <button class="close-btn" onclick="toggleChat()">&times;</button>
951
- </div>
952
- <div class="chat-box" id="chatBox">
953
- <div class="bot-message">
954
- <p>Hello! Ask me questions related to Pakistan penal code, code of criminal and civil procedure,constitution of pakistan and rules of business </p>
955
- </div>
956
- </div>
957
- <div class="chat-input">
958
- <input type="text" id="userInput" placeholder="Type a message..." autofocus>
959
- <button onclick="sendMessage()"><i class="fa fa-paper-plane"></i></button>
960
- </div>
961
- </div>
962
-
963
- <div class="sidebar">
964
- <h3>History</h3>
965
-
966
- <!-- Last Summaries -->
967
- <div class="history-section">
968
- <h4>Last 2 Summaries</h4>
969
- <ul id="summaryHistory"></ul>
970
- </div>
971
-
972
- <!-- Last Chats -->
973
- <div class="history-section">
974
- <h4>Last 2 Chats</h4>
975
- <ul id="chatHistory"></ul>
976
- </div>
977
- </div>
978
-
979
- <footer class="footer">
980
- <div class="footer-logo">
981
- <div class="footer-logo-container">
982
- <img src="{{ url_for('static', filename='logo.png') }}" alt="Lawsumm logo">
983
- <h2>LawSumm</h2>
984
- </div>
985
- <div class="social-icons">
986
- <a href="#"><i class="fa-brands fa-twitter"></i></a>
987
- <a href="#"><i class="fa-brands fa-linkedin"></i></a>
988
- <a href="#"><i class="fa-brands fa-youtube"></i></a>
989
- <a href="#"><i class="fa-brands fa-discord"></i></a>
990
- </div>
991
- </div>
992
-
993
- <div class="footer-links">
994
- <div class="footer-column">
995
- <h3>About</h3>
996
- <a href="{{ url_for('about') }}">Why Lawsumm</a>
997
- <a href="{{ url_for('home') }}">Legal Library</a>
998
- <a href="{{ url_for('about') }}">Team</a>
999
- <a href="{{ url_for('home') }}">FAQs</a>
1000
- </div>
1001
-
1002
- <div class="footer-column">
1003
- <h3>Product</h3>
1004
- <a href="{{ url_for('summarization') }}">summarizer</a>
1005
- <a href="{{ url_for('summarization') }}">Legal Chatbot</a>
1006
- <a href="Terms and Conditions.pdf">Privacy Policy</a>
1007
- </div>
1008
-
1009
- <div class="footer-column">
1010
- <h3>Get Started</h3>
1011
- <a href="{{ url_for('login') }}">LogIn</a>
1012
- <a href="{{ url_for('signup') }}">SignUp</a>
1013
- <a href="{{ url_for('contact') }}">Contact Us</a>
1014
-
1015
- </div>
1016
- <div class="footer-column">
1017
- <h3>Contact</h3>
1018
- <p style="display: flex; align-items: center; gap: 8px;">
1019
- <i class="fa-solid fa-envelope"></i>
1020
- <a href="mailto:[email protected]">
1021
1022
- </a>
1023
- </p>
1024
- <p style="display: flex; align-items: center; gap: 8px;">
1025
- <i class="fa-solid fa-phone"></i>
1026
-
1027
- +92 337 55498762
1028
- </p>
1029
- </div>
1030
-
1031
-
1032
-
1033
- </div>
1034
- </footer>
1035
-
1036
- <div class="footer-bottom">
1037
- Β© 2025 LawSumm by OthersideAI. All rights reserved.
1038
- <a href="{{ url_for('serve_pdf', filename='Terms and Conditions.pdf') }}" target="_blank">
1039
- Privacy Policy
1040
- </a>
1041
- |
1042
- <a href="{{ url_for('serve_pdf', filename='Terms and Conditions.pdf') }}" target="_blank">
1043
- Terms
1044
- </a>
1045
- </div>
1046
-
1047
-
1048
-
1049
- </body>
1050
- <script>
1051
- document.addEventListener("DOMContentLoaded", function() {
1052
- const menuToggle = document.querySelector(".menu-toggle");
1053
- const navLinks = document.querySelector(".nav-links");
1054
-
1055
- menuToggle.addEventListener("click", function() {
1056
- navLinks.classList.toggle("show");
1057
- });
1058
- });
1059
-
1060
-
1061
-
1062
- function redirectToLogin() {
1063
- window.location.href = "loginpage.html"; // Redirects to the login page
1064
- }
1065
-
1066
- function redirectToSignup() {
1067
- window.location.href = "signuppage.html"; // Redirects to the signup page
1068
- }
1069
- function redirectToaboutpage(){
1070
- window.location.href = "aboutpage.html";
1071
- }
1072
- function redirectTomainpage(){
1073
- window.location.href = "summerization-app\templates\mainscreen.html";
1074
- }
1075
- document.addEventListener("DOMContentLoaded", function () {
1076
- let dropArea = document.getElementById("dropArea");
1077
- let fileInput = document.getElementById("fileInput");
1078
- let pasteBtn = document.getElementById("pasteBtn");
1079
- let urlBtn = document.getElementById("urlBtn");
1080
- let pasteText = document.getElementById("pasteText");
1081
- let urlInput = document.getElementById("urlInput");
1082
- let submitBtn = document.querySelector(".submit-btn");
1083
-
1084
- // Handle file drag over
1085
- dropArea.addEventListener("dragover", (e) => {
1086
- e.preventDefault();
1087
- dropArea.style.background = "#black";
1088
- });
1089
-
1090
- dropArea.addEventListener("dragleave", () => {
1091
- dropArea.style.background = "black";
1092
- });
1093
-
1094
- dropArea.addEventListener("drop", (e) => {
1095
- e.preventDefault();
1096
- dropArea.style.background = " #333";
1097
- let files = e.dataTransfer.files;
1098
- if (files.length > 0) {
1099
- fileInput.files = files;
1100
- submitBtn.classList.remove("hidden");
1101
- }
1102
- });
1103
-
1104
- // Show textarea on paste button click
1105
- pasteBtn.addEventListener("click", () => {
1106
- pasteText.classList.toggle("hidden");
1107
- submitBtn.classList.toggle("hidden");
1108
- });
1109
-
1110
-
1111
-
1112
- // Show submit button when file is chosen
1113
- fileInput.addEventListener("change", () => {
1114
- if (fileInput.files.length > 0) {
1115
- submitBtn.classList.remove("hidden");
1116
- }
1117
- });
1118
- });
1119
-
1120
-
1121
-
1122
-
1123
-
1124
-
1125
- document.addEventListener("DOMContentLoaded", function () {
1126
- loadHistory(); // Load history when page loads
1127
- });
1128
-
1129
-
1130
-
1131
-
1132
- function storeSummary(summaryText) {
1133
- let summaries = JSON.parse(localStorage.getItem("summaries")) || [];
1134
- summaries.unshift(summaryText);
1135
- summaries = summaries.slice(0, 2); // Keep only last 2
1136
- localStorage.setItem("summaries", JSON.stringify(summaries));
1137
- loadSummaryHistory();
1138
- }
1139
-
1140
- // Load saved summaries on page load
1141
- function loadSummaryHistory() {
1142
- const historyDiv = document.getElementById("summaryHistory");
1143
- if (!historyDiv) return;
1144
-
1145
- historyDiv.innerHTML = ""; // Clear previous display
1146
-
1147
- const summaries = JSON.parse(localStorage.getItem("summaries")) || [];
1148
- summaries.forEach((text, index) => {
1149
- const blob = new Blob([text], { type: "text/plain" });
1150
- const link = document.createElement("a");
1151
- link.href = URL.createObjectURL(blob);
1152
- link.download = `summary_${index + 1}.txt`;
1153
- link.textContent = `Download Summary ${index + 1}`;
1154
- link.className = "download-link";
1155
- historyDiv.appendChild(link);
1156
- historyDiv.appendChild(document.createElement("br"));
1157
- });
1158
- }
1159
-
1160
-
1161
-
1162
- // Function to store chat messages in history
1163
- document.addEventListener("DOMContentLoaded", function () {
1164
- const chatBox = document.getElementById("chatBox");
1165
- const userInput = document.getElementById("userInput");
1166
- const chatbotIcon = document.querySelector(".chatbot-icon");
1167
- const footer = document.querySelector("footer");
1168
- const chatContainer = document.getElementById("chatContainer");
1169
-
1170
- loadChatHistory(); // Load previous chat prompts
1171
- loadSummaryHistory(); // Load previous summaries// Load summaries and chat history
1172
-
1173
- // Toggle chatbot visibility
1174
- window.toggleChat = function () {
1175
- if (!chatContainer) return;
1176
- chatContainer.style.display = (chatContainer.style.display === "block") ? "none" : "block";
1177
- };
1178
-
1179
- // Scroll-aware positioning of chatbot icon
1180
- function checkFooter() {
1181
- if (!footer || !chatbotIcon) return;
1182
- const footerTop = footer.getBoundingClientRect().top;
1183
- const windowHeight = window.innerHeight;
1184
-
1185
- if (footerTop < windowHeight) {
1186
- chatbotIcon.classList.add("fixed");
1187
- chatbotIcon.style.bottom = (windowHeight - footerTop + 20) + "px";
1188
- } else {
1189
- chatbotIcon.classList.remove("fixed");
1190
- chatbotIcon.style.bottom = "30px";
1191
- }
1192
- }
1193
-
1194
- window.addEventListener("scroll", checkFooter);
1195
-
1196
- chatbotIcon?.addEventListener("click", function () {
1197
- chatbotIcon.classList.add("stop-animation");
1198
- });
1199
-
1200
- // Send message on Enter key
1201
- userInput?.addEventListener("keypress", function (e) {
1202
- if (e.key === "Enter") sendMessage();
1203
- });
1204
-
1205
- // Send message function
1206
- // Send message function
1207
- function sendMessage() {
1208
- const userText = userInput.value.trim();
1209
- if (!userText) return;
1210
-
1211
- appendMessage(userText, "user");
1212
- userInput.value = "";
1213
-
1214
- fetch("https://izza-shahzad-13-laww.hf.space/ask", {
1215
- method: "POST",
1216
- headers: { "Content-Type": "application/json" },
1217
- body: JSON.stringify({ query: userText }) // Changed key from 'data' to 'query'
1218
- })
1219
- .then(res => res.json())
1220
- .then(data => {
1221
- const botReply = data.response || "No response received.";
1222
- appendMessage(botReply, "bot");
1223
- })
1224
- .catch(err => {
1225
- appendMessage("Error: " + err.message, "bot");
1226
- });
1227
- }
1228
-
1229
-
1230
- // Append message to chat box
1231
- function appendMessage(content, sender) {
1232
- if (!chatBox) return;
1233
- const messageElem = document.createElement("div");
1234
- messageElem.classList.add(sender === "user" ? "user-message" : "bot-message");
1235
- messageElem.innerHTML = `<p>${content}</p>`;
1236
- chatBox.appendChild(messageElem);
1237
- chatBox.scrollTop = chatBox.scrollHeight;
1238
-
1239
- if (sender === "user") {
1240
- storeChatMessage(content); // Save only user prompt
1241
- }
1242
- }
1243
-
1244
- function storeChatMessage(prompt) {
1245
- let prompts = JSON.parse(localStorage.getItem("userPrompts")) || [];
1246
- prompts.unshift(prompt); // Add latest prompt at the beginning
1247
- prompts = prompts.slice(0, 2); // Keep only last 2
1248
- localStorage.setItem("userPrompts", JSON.stringify(prompts));
1249
- loadChatHistory(); // update UI
1250
- }
1251
-
1252
-
1253
- function loadChatHistory() {
1254
- const chatList = document.getElementById("chatHistory");
1255
- if (!chatList) return;
1256
-
1257
- chatList.innerHTML = "";
1258
- const prompts = JSON.parse(localStorage.getItem("userPrompts")) || [];
1259
- prompts.forEach(prompt => {
1260
- const chatItem = document.createElement("li");
1261
- chatItem.textContent = prompt;
1262
- chatList.appendChild(chatItem);
1263
- });
1264
- }
1265
-
1266
-
1267
-
1268
- // Expose sendMessage globally for onclick
1269
- window.sendMessage = function () {
1270
- const message = userInput.value.trim();
1271
- if (!message) return;
1272
- appendMessage(message, "user");
1273
-
1274
- // Simulated bot reply (you can replace with real AI call)
1275
- setTimeout(() => {
1276
- appendMessage("Got it! Let me help you with that. πŸ€–", "bot");
1277
- }, 500);
1278
-
1279
- userInput.value = "";
1280
- };
1281
-
1282
- // Initialize history on page load
1283
- loadChatHistory();
1284
- });
1285
-
1286
- document.getElementById("submitBtn").addEventListener("click", async () => {
1287
- const fileInput = document.getElementById("fileInput");
1288
- const summaryDiv = document.getElementById("summary");
1289
-
1290
- if (fileInput.files.length === 0) {
1291
- alert("Please select a file first.");
1292
- return;
1293
- }
1294
-
1295
- const file = fileInput.files[0];
1296
- const formData = new FormData();
1297
- formData.append("file", file);
1298
-
1299
- summaryDiv.textContent = "Processing...";
1300
-
1301
- try {
1302
- const response = await fetch("https://izza-shahzad-13-laww.hf.space/", {
1303
- method: "POST",
1304
- body: formData
1305
- });
1306
-
1307
- if (!response.ok) {
1308
- throw new Error(`Server error: ${response.statusText}`);
1309
- }
1310
-
1311
- const result = await response.text(); // assuming Flask returns summary as plain text
1312
- summaryDiv.textContent = "πŸ“„ Summary:\n" + result;
1313
-
1314
- } catch (error) {
1315
- console.error(error);
1316
- summaryDiv.textContent = "❌ Error: " + error.message;
1317
- }
1318
- });
1319
-
1320
- </script>
1321
- </html>