Hugging Face's logo

Spaces:
Aditya150
/
Veritas-AI
Sleeping

App Files Community
Aditya-Jadhav150 commited on
Commit
f8f3f9f
·
1 Parent(s): f665956

Optimize responsive layout and GPU-accelerated animations for mobile viewports

Browse files
Files changed (2) hide show
  1. templates/admin.html +61 -22
  2. templates/index.html +190 -12
templates/admin.html CHANGED
@@ -256,6 +256,43 @@
256
  .spin {
257
  animation: spin 1s linear infinite;
258
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
259
  </style>
260
  </head>
261
  <body>
@@ -286,28 +323,30 @@
286
  </button>
287
  </div>
288
 
289
- <table id="users-table">
290
- <thead>
291
- <tr>
292
- <th>Node ID</th>
293
- <th>Username</th>
294
- <th>Email Vector</th>
295
- <th>Auth Signature</th>
296
- <th>Identity Lock Status</th>
297
- <th>AI Data Opt-In</th>
298
- </tr>
299
- </thead>
300
- <tbody id="users-tbody">
301
- <tr>
302
- <td colspan="6">
303
- <div class="empty-state">
304
- <i class="fa-solid fa-circle-notch spin"></i>
305
- <div>Decrypting Database...</div>
306
- </div>
307
- </td>
308
- </tr>
309
- </tbody>
310
- </table>
 
 
311
  </div>
312
  </div>
313
 
 
256
  .spin {
257
  animation: spin 1s linear infinite;
258
  }
259
+
260
+ .table-container {
261
+ width: 100%;
262
+ overflow-x: auto;
263
+ -webkit-overflow-scrolling: touch;
264
+ }
265
+
266
+ @media (max-width: 768px) {
267
+ .admin-header {
268
+ padding: 12px 16px;
269
+ }
270
+ .brand {
271
+ font-size: 1rem;
272
+ gap: 8px;
273
+ }
274
+ .admin-badge {
275
+ display: none;
276
+ }
277
+ .container {
278
+ margin: 20px auto;
279
+ padding: 0 12px;
280
+ }
281
+ .page-title {
282
+ font-size: 1.5rem;
283
+ }
284
+ .page-subtitle {
285
+ font-size: 0.85rem;
286
+ margin-bottom: 20px;
287
+ }
288
+ .panel-header {
289
+ padding: 15px 20px;
290
+ }
291
+ th, td {
292
+ padding: 12px 15px;
293
+ font-size: 0.8rem;
294
+ }
295
+ }
296
  </style>
297
  </head>
298
  <body>
 
323
  </button>
324
  </div>
325
 
326
+ <div class="table-container">
327
+ <table id="users-table">
328
+ <thead>
329
+ <tr>
330
+ <th>Node ID</th>
331
+ <th>Username</th>
332
+ <th>Email Vector</th>
333
+ <th>Auth Signature</th>
334
+ <th>Identity Lock Status</th>
335
+ <th>AI Data Opt-In</th>
336
+ </tr>
337
+ </thead>
338
+ <tbody id="users-tbody">
339
+ <tr>
340
+ <td colspan="6">
341
+ <div class="empty-state">
342
+ <i class="fa-solid fa-circle-notch spin"></i>
343
+ <div>Decrypting Database...</div>
344
+ </div>
345
+ </td>
346
+ </tr>
347
+ </tbody>
348
+ </table>
349
+ </div>
350
  </div>
351
  </div>
352
 
templates/index.html CHANGED
@@ -494,12 +494,15 @@
494
  content: '';
495
  position: absolute;
496
  width: 100%;
497
- height: 3px;
498
- background: var(--accent);
499
- box-shadow: 0 0 8px var(--accent);
500
  top: 0;
501
  left: 0;
 
 
 
502
  animation: scanline 2.5s ease-in-out infinite;
 
 
503
  }
504
 
505
  /* 9 Metric Grid Breakdown */
@@ -570,8 +573,11 @@
570
  .metric-fill {
571
  height: 100%;
572
  border-radius: 2px;
573
- width: 0%;
574
- transition: width 1s cubic-bezier(0.1, 0.8, 0.2, 1);
 
 
 
575
  }
576
 
577
  /* Tooltip style */
@@ -770,9 +776,9 @@
770
  }
771
 
772
  @keyframes scanline {
773
- 0% { top: 0%; }
774
- 50% { top: 100%; }
775
- 100% { top: 0%; }
776
  }
777
 
778
  @keyframes pulse-glow {
@@ -780,6 +786,153 @@
780
  50% { opacity: 1; text-shadow: 0 0 20px rgba(0, 255, 170, 0.6); }
781
  100% { opacity: 0.6; text-shadow: 0 0 10px rgba(0, 255, 170, 0.2); }
782
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
783
  </style>
784
  </head>
785
  <body>
@@ -1109,6 +1262,11 @@
1109
  resultsEmpty.style.display = 'none';
1110
  resultsContainer.style.display = 'none';
1111
 
 
 
 
 
 
1112
  // Simulate the processing pipeline step-by-step
1113
  const steps = [
1114
  { id: 'step-0', duration: 800 },
@@ -1216,9 +1374,9 @@
1216
  const elBar = document.getElementById('bar-' + id);
1217
  elVal.textContent = val;
1218
 
1219
- // Scale value to a readable percentage width
1220
- let percent = Math.min(100, Math.max(0, (val / max) * 100 * scale));
1221
- elBar.style.width = percent + '%';
1222
 
1223
  // Color coding: red if fake (extreme), green if organic
1224
  if (isFake) {
@@ -1323,7 +1481,27 @@
1323
  }
1324
 
1325
  // Init
1326
- document.addEventListener('DOMContentLoaded', loadProfile);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1327
  </script>
1328
  </body>
1329
  </html>
 
494
  content: '';
495
  position: absolute;
496
  width: 100%;
497
+ height: 100%;
 
 
498
  top: 0;
499
  left: 0;
500
+ border-bottom: 3px solid var(--accent);
501
+ box-shadow: 0 2px 8px var(--accent);
502
+ transform: translateY(-100%);
503
  animation: scanline 2.5s ease-in-out infinite;
504
+ will-change: transform;
505
+ pointer-events: none;
506
  }
507
 
508
  /* 9 Metric Grid Breakdown */
 
573
  .metric-fill {
574
  height: 100%;
575
  border-radius: 2px;
576
+ width: 100%;
577
+ transform: scaleX(0);
578
+ transform-origin: left;
579
+ transition: transform 1s cubic-bezier(0.1, 0.8, 0.2, 1);
580
+ will-change: transform;
581
  }
582
 
583
  /* Tooltip style */
 
776
  }
777
 
778
  @keyframes scanline {
779
+ 0% { transform: translateY(-100%); }
780
+ 50% { transform: translateY(0); }
781
+ 100% { transform: translateY(-100%); }
782
  }
783
 
784
  @keyframes pulse-glow {
 
786
  50% { opacity: 1; text-shadow: 0 0 20px rgba(0, 255, 170, 0.6); }
787
  100% { opacity: 0.6; text-shadow: 0 0 10px rgba(0, 255, 170, 0.2); }
788
  }
789
+
790
+ /* Mobile responsive optimizations and layout styling */
791
+ @media (max-width: 768px) {
792
+ header {
793
+ padding: 12px 16px;
794
+ backdrop-filter: none !important;
795
+ background: rgba(3, 3, 3, 0.95);
796
+ }
797
+ .logo-section {
798
+ font-size: 1.1rem;
799
+ gap: 8px;
800
+ }
801
+ .logo-badge {
802
+ font-size: 0.6rem;
803
+ padding: 2px 6px;
804
+ }
805
+ .nav-actions {
806
+ gap: 10px;
807
+ }
808
+ .user-pill {
809
+ padding: 4px 10px;
810
+ font-size: 0.8rem;
811
+ gap: 6px;
812
+ }
813
+ .admin-link {
814
+ padding: 6px 12px;
815
+ font-size: 0.75rem;
816
+ gap: 6px;
817
+ }
818
+ main {
819
+ margin: 15px auto;
820
+ padding: 0 12px;
821
+ gap: 15px;
822
+ }
823
+ .dashboard-grid {
824
+ gap: 15px;
825
+ }
826
+ .glass-panel {
827
+ padding: 15px;
828
+ backdrop-filter: none !important;
829
+ background: rgba(10, 10, 10, 0.95);
830
+ gap: 15px;
831
+ }
832
+ .drop-zone {
833
+ padding: 30px 15px;
834
+ gap: 10px;
835
+ }
836
+ .drop-zone i {
837
+ font-size: 2.5rem;
838
+ }
839
+ .preview-container {
840
+ aspect-ratio: 4/3;
841
+ }
842
+ .preview-actions {
843
+ bottom: 12px;
844
+ left: 12px;
845
+ right: 12px;
846
+ gap: 8px;
847
+ }
848
+ .btn {
849
+ padding: 10px 15px;
850
+ font-size: 0.85rem;
851
+ }
852
+ .scan-overlay {
853
+ padding: 20px 10px;
854
+ gap: 20px;
855
+ backdrop-filter: none !important;
856
+ background: rgba(3, 3, 3, 0.98);
857
+ }
858
+ .scan-visualizer {
859
+ width: 100px;
860
+ height: 100px;
861
+ }
862
+ .scan-visualizer i {
863
+ font-size: 2.2rem;
864
+ }
865
+ .pipeline-steps {
866
+ max-width: 100%;
867
+ gap: 8px;
868
+ }
869
+ .step-item {
870
+ font-size: 0.75rem;
871
+ }
872
+ .results-container {
873
+ gap: 15px;
874
+ }
875
+ .verdict-banner {
876
+ padding: 15px;
877
+ }
878
+ .verdict-info h4 {
879
+ font-size: 1.15rem;
880
+ }
881
+ .verdict-percentage {
882
+ font-size: 1.8rem;
883
+ }
884
+ .images-comparison {
885
+ gap: 10px;
886
+ }
887
+ .metrics-grid {
888
+ grid-template-columns: 1fr;
889
+ gap: 10px;
890
+ }
891
+ .metric-card {
892
+ padding: 12px;
893
+ gap: 6px;
894
+ -webkit-tap-highlight-color: transparent;
895
+ }
896
+ .tooltip {
897
+ width: 200px;
898
+ margin-left: -100px;
899
+ font-size: 0.7rem;
900
+ padding: 8px 10px;
901
+ }
902
+ .modal-content {
903
+ padding: 20px;
904
+ gap: 15px;
905
+ }
906
+ }
907
+
908
+ @media (max-width: 480px) {
909
+ .verdict-banner {
910
+ flex-direction: column;
911
+ align-items: flex-start;
912
+ gap: 12px;
913
+ }
914
+ .verdict-percentage {
915
+ align-self: flex-end;
916
+ }
917
+ .nav-actions {
918
+ #header-username {
919
+ display: none;
920
+ }
921
+ }
922
+ .user-pill {
923
+ padding: 6px;
924
+ border-radius: 50%;
925
+ }
926
+ .user-pill i {
927
+ margin: 0;
928
+ }
929
+ }
930
+
931
+ /* Active styling for mobile tap tooltips */
932
+ .metric-card.active-tooltip .tooltip {
933
+ visibility: visible;
934
+ opacity: 1;
935
+ }
936
  </style>
937
  </head>
938
  <body>
 
1262
  resultsEmpty.style.display = 'none';
1263
  resultsContainer.style.display = 'none';
1264
 
1265
+ // Reset metric progress fills to scaleX(0)
1266
+ document.querySelectorAll('.metric-fill').forEach(bar => {
1267
+ bar.style.transform = 'scaleX(0)';
1268
+ });
1269
+
1270
  // Simulate the processing pipeline step-by-step
1271
  const steps = [
1272
  { id: 'step-0', duration: 800 },
 
1374
  const elBar = document.getElementById('bar-' + id);
1375
  elVal.textContent = val;
1376
 
1377
+ // Scale value to a fraction for scaleX transition
1378
+ let fraction = Math.min(1, Math.max(0, (val / max) * scale));
1379
+ elBar.style.transform = `scaleX(${fraction})`;
1380
 
1381
  // Color coding: red if fake (extreme), green if organic
1382
  if (isFake) {
 
1481
  }
1482
 
1483
  // Init
1484
+ document.addEventListener('DOMContentLoaded', () => {
1485
+ loadProfile();
1486
+
1487
+ // Set up mobile tooltip toggles on metric card clicks
1488
+ document.querySelectorAll('.metric-card').forEach(card => {
1489
+ card.addEventListener('click', (e) => {
1490
+ const wasActive = card.classList.contains('active-tooltip');
1491
+ // Clear all tooltips first
1492
+ document.querySelectorAll('.metric-card').forEach(c => c.classList.remove('active-tooltip'));
1493
+ if (!wasActive) {
1494
+ card.classList.add('active-tooltip');
1495
+ }
1496
+ e.stopPropagation();
1497
+ });
1498
+ });
1499
+
1500
+ // Clicking anywhere else closes active tooltips
1501
+ document.addEventListener('click', () => {
1502
+ document.querySelectorAll('.metric-card').forEach(c => c.classList.remove('active-tooltip'));
1503
+ });
1504
+ });
1505
  </script>
1506
  </body>
1507
  </html>