techfreakworm commited on
Commit
a5c8e5e
·
verified ·
1 Parent(s): ecc1595

feat(ui): add Discord community link to tipbar and drawer

Browse files

Two entry points for "Chat with the maker on Discord":

- Tipbar: appended as a third bullet next to the support / follow row,
unobtrusive but persistent.
- Drawer: new "Community" section at the bottom with a styled
amber-on-slate button (border-brighten + arrow nudge on hover),
matching the Topaz Cinema Slate palette.

Both open `https://discord.gg/qbn3exeEXa` in a new tab.

Files changed (1) hide show
  1. app.py +43 -1
app.py CHANGED
@@ -356,6 +356,37 @@ _CUSTOM_CSS = """
356
  color: #7C8693;
357
  }
358
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
  /* === Status banner === */
360
  .status-card {
361
  padding: 12px 16px;
@@ -506,7 +537,9 @@ def build_app() -> gr.Blocks:
506
  '<strong>Drop a <span class="aio-heart">♥</span> at the top</strong> to support it '
507
  '· '
508
  'Follow <a href="https://huggingface.co/techfreakworm" target="_blank" rel="noopener noreferrer">@techfreakworm</a> '
509
- 'for what\'s next.'
 
 
510
  '</div>'
511
  )
512
 
@@ -546,6 +579,15 @@ def build_app() -> gr.Blocks:
546
  "the auto-detected VRAM tier.",
547
  elem_classes=["aio-model-badge"],
548
  )
 
 
 
 
 
 
 
 
 
549
 
550
  # Body — unchanged, still hosts the 6 mode tabs.
551
  with gr.Column(scale=4, elem_classes=["aio-body"]):
 
356
  color: #7C8693;
357
  }
358
 
359
+ /* Discord callout — drawer-bottom community button. Warm amber-on-slate
360
+ to match the Topaz palette; the arrow nudges right on hover so it
361
+ reads as actionable without screaming. */
362
+ .aio-discord-btn {
363
+ display: flex;
364
+ align-items: center;
365
+ gap: 10px;
366
+ padding: 10px 12px;
367
+ margin: 4px 0;
368
+ border-radius: 8px;
369
+ background: linear-gradient(135deg, #1F2630 0%, #1A1F26 100%);
370
+ border: 1px solid #2C3340;
371
+ color: #E0A458 !important;
372
+ font-size: 12.5px;
373
+ font-weight: 500;
374
+ text-decoration: none !important;
375
+ transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
376
+ }
377
+ .aio-discord-btn:hover {
378
+ border-color: #E0A458;
379
+ background: linear-gradient(135deg, #242C37 0%, #1F2630 100%);
380
+ }
381
+ .aio-discord-btn:hover .aio-discord-arrow { transform: translateX(3px); }
382
+ .aio-discord-glyph { font-size: 14px; line-height: 1; }
383
+ .aio-discord-arrow {
384
+ margin-left: auto;
385
+ color: #7C8693;
386
+ transition: transform 0.15s ease, color 0.15s ease;
387
+ }
388
+ .aio-discord-btn:hover .aio-discord-arrow { color: #E0A458; }
389
+
390
  /* === Status banner === */
391
  .status-card {
392
  padding: 12px 16px;
 
537
  '<strong>Drop a <span class="aio-heart">♥</span> at the top</strong> to support it '
538
  '· '
539
  'Follow <a href="https://huggingface.co/techfreakworm" target="_blank" rel="noopener noreferrer">@techfreakworm</a> '
540
+ 'for what\'s next '
541
+ '· '
542
+ '<a href="https://discord.gg/qbn3exeEXa" target="_blank" rel="noopener noreferrer">Chat with the maker on Discord</a>'
543
  '</div>'
544
  )
545
 
 
579
  "the auto-detected VRAM tier.",
580
  elem_classes=["aio-model-badge"],
581
  )
582
+ gr.Markdown("Community", elem_classes=["aio-drawer-heading"])
583
+ gr.HTML(
584
+ '<a class="aio-discord-btn" href="https://discord.gg/qbn3exeEXa" '
585
+ 'target="_blank" rel="noopener noreferrer">'
586
+ '<span class="aio-discord-glyph">✨</span>'
587
+ '<span>Chat with the maker on Discord</span>'
588
+ '<span class="aio-discord-arrow">→</span>'
589
+ '</a>'
590
+ )
591
 
592
  # Body — unchanged, still hosts the 6 mode tabs.
593
  with gr.Column(scale=4, elem_classes=["aio-body"]):