TOTEM Studio commited on
Commit
c9eff87
·
1 Parent(s): 3e03dc1

fix hero image serving + gauge layout

Browse files

- Add allowed_paths=['assets'] to demo.launch() so /file= works
- Restructure hero HTML: flex row with left (title/subtitle) and right (gauge)
- Signal gauge now flow-positioned in hero-right div, not absolute
- Hero content div handles z-index over background image

Files changed (1) hide show
  1. app.py +35 -8
app.py CHANGED
@@ -380,11 +380,32 @@ TOTEM_CSS = """
380
  font-family: var(--font-ui);
381
  }
382
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
383
  .totem-signal-wrap {
384
- position: absolute;
385
- right: 52px;
386
- top: 50%;
387
- transform: translateY(-50%);
388
  width: 160px;
389
  height: 160px;
390
  }
@@ -1291,9 +1312,15 @@ def render_hero(state: dict) -> str:
1291
  return f"""
1292
  <section class="totem-hero">
1293
  <img src="/file=assets/Brand/Hero.png" alt="" class="totem-hero-bg" aria-hidden="true" />
1294
- <h2 class="totem-hero-title">TOTEM Studio<span class="totem-hero-star">✦</span></h2>
1295
- <p class="totem-hero-subtitle">Data-driven insight for stronger stories.</p>
1296
- {render_signal_gauge(signal)}
 
 
 
 
 
 
1297
  </section>
1298
  """
1299
 
@@ -2636,4 +2663,4 @@ if __name__ == "__main__":
2636
  print("[stage2] dashboard_state contract OK")
2637
  else:
2638
  print(f"[stage2] dashboard_state missing keys: {missing_keys}")
2639
- demo.launch(ssr_mode=False, css=CSS + TOTEM_CSS + SS_CSS, head=HEAD)
 
380
  font-family: var(--font-ui);
381
  }
382
 
383
+ .totem-hero-content {
384
+ position: relative;
385
+ z-index: 1;
386
+ display: flex;
387
+ align-items: center;
388
+ justify-content: space-between;
389
+ width: 100%;
390
+ min-height: 160px;
391
+ }
392
+
393
+ .totem-hero-left {
394
+ flex: 1;
395
+ }
396
+
397
+ .totem-hero-right {
398
+ flex: 0 0 180px;
399
+ display: flex;
400
+ align-items: center;
401
+ justify-content: center;
402
+ }
403
+
404
  .totem-signal-wrap {
405
+ position: relative;
406
+ right: auto;
407
+ top: auto;
408
+ transform: none;
409
  width: 160px;
410
  height: 160px;
411
  }
 
1312
  return f"""
1313
  <section class="totem-hero">
1314
  <img src="/file=assets/Brand/Hero.png" alt="" class="totem-hero-bg" aria-hidden="true" />
1315
+ <div class="totem-hero-content">
1316
+ <div class="totem-hero-left">
1317
+ <h2 class="totem-hero-title">TOTEM Studio<span class="totem-hero-star">✦</span></h2>
1318
+ <p class="totem-hero-subtitle">Data-driven insight for stronger stories.</p>
1319
+ </div>
1320
+ <div class="totem-hero-right">
1321
+ {render_signal_gauge(signal)}
1322
+ </div>
1323
+ </div>
1324
  </section>
1325
  """
1326
 
 
2663
  print("[stage2] dashboard_state contract OK")
2664
  else:
2665
  print(f"[stage2] dashboard_state missing keys: {missing_keys}")
2666
+ demo.launch(ssr_mode=False, css=CSS + TOTEM_CSS + SS_CSS, head=HEAD, allowed_paths=["assets"])