From d521575bcfcb962ccd0baa2cda53c00ff99e169e Mon Sep 17 00:00:00 2001 From: Gurpreet Singh Date: Fri, 16 Jan 2026 18:33:18 -0500 Subject: [PATCH] more Ui changes --- index.html | 222 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 186 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 2b6245f..db9a373 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,7 @@ --primary: #0D9488; /* teal */ --primary2: #146C94; /* deep blue */ --accent: #FF6B6B; /* coral */ + --adcom: #f59e0b; /* amber/yellow */ --successBg: #eafff6; } @@ -33,6 +34,7 @@ --border: rgba(226,232,240,0.14); --shadow: 0 12px 34px rgba(0,0,0,0.40); --successBg: rgba(13,148,136,0.16); + --adcom: #fbbf24; /* amber/yellow for dark */ } body { @@ -42,6 +44,8 @@ background: radial-gradient(1200px 600px at 10% 0%, var(--bg2), var(--bg)); color: var(--text); } + /* Prevent horizontal overflow from padding/borders */ + *, *::before, *::after { box-sizing: border-box; } .container { width: min(92vw, 1120px); @@ -56,7 +60,55 @@ padding: 16px; background: var(--card); box-shadow: var(--shadow); + min-width: 0; } + + /* Section cards: subtle themed accents for easy scanning */ + .sectionCard { + padding: 0; /* header + body handle spacing */ + overflow: hidden; + } + .sectionHeader { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; + padding: 14px 16px; + border-bottom: 1px solid var(--border); + background: color-mix(in srgb, var(--card) 88%, var(--bg) 12%); + } + .sectionBody { + padding: 14px 16px 16px; + } + .sectionTitle { + display: flex; + align-items: center; + gap: 10px; + margin: 0; + font-weight: 700; + } + .sectionBadge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + border-radius: 999px; + border: 1px solid var(--border); + font-size: 12px; + color: var(--muted); + background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%); + white-space: nowrap; + } + + .sectionGoogle { border-left: 4px solid var(--primary2); } + .sectionApple { border-left: 4px solid var(--accent); } + .sectionAdcap { border-left: 4px solid var(--primary); } + .sectionAdcom { border-left: 4px solid var(--adcom); } + + .sectionGoogle .sectionHeader { background: color-mix(in srgb, var(--card) 86%, var(--primary2) 14%); } + .sectionApple .sectionHeader { background: color-mix(in srgb, var(--card) 86%, var(--accent) 14%); } + .sectionAdcap .sectionHeader { background: color-mix(in srgb, var(--card) 86%, var(--primary) 14%); } + .sectionAdcom .sectionHeader { background: color-mix(in srgb, var(--card) 86%, var(--adcom) 14%); } .muted { color: var(--muted); font-size: 14px; } .btn { padding: 9px 12px; @@ -83,6 +135,7 @@ border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%); color: var(--text); + box-sizing: border-box; } .grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; } .topbar { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; } @@ -114,6 +167,30 @@ color: var(--text); } .navRow { display: flex; flex-wrap: wrap; gap: 10px; } + + /* Floating Jump-to panel (desktop): outside container on the left */ + .jumpNav { + position: fixed; + top: 120px; /* closer to the header */ + left: max(14px, calc((100vw - 1120px) / 2 - 248px)); + width: 220px; + z-index: 9000; + } + .jumpNav .navRow { + flex-direction: column; + align-items: stretch; + } + .jumpNav .navBtn { + width: 100%; + text-align: left; + } + + /* Show inline Jump-to inside the page on narrower screens */ + .inlineJump { display: none; } + @media (max-width: 1200px) { + .jumpNav { display: none; } + .inlineJump { display: block; } + } .navBtn { padding: 8px 10px; border-radius: 999px; @@ -128,6 +205,47 @@ background: color-mix(in srgb, var(--card) 86%, var(--primary2) 14%); border-color: color-mix(in srgb, var(--border) 60%, var(--primary2) 40%); } + + /* Jump-to button colors (match section accents) */ + .jumpNav .navBtn[data-scroll="googleSection"], + .inlineJump .navBtn[data-scroll="googleSection"] { + background: color-mix(in srgb, var(--card) 90%, var(--primary2) 10%); + border-color: color-mix(in srgb, var(--border) 55%, var(--primary2) 45%); + } + .jumpNav .navBtn[data-scroll="googleSection"]:hover, + .inlineJump .navBtn[data-scroll="googleSection"]:hover { + background: color-mix(in srgb, var(--card) 84%, var(--primary2) 16%); + } + + .jumpNav .navBtn[data-scroll="appleSection"], + .inlineJump .navBtn[data-scroll="appleSection"] { + background: color-mix(in srgb, var(--card) 90%, var(--accent) 10%); + border-color: color-mix(in srgb, var(--border) 55%, var(--accent) 45%); + } + .jumpNav .navBtn[data-scroll="appleSection"]:hover, + .inlineJump .navBtn[data-scroll="appleSection"]:hover { + background: color-mix(in srgb, var(--card) 84%, var(--accent) 16%); + } + + .jumpNav .navBtn[data-scroll="playfabAdcomSection"], + .inlineJump .navBtn[data-scroll="playfabAdcomSection"] { + background: color-mix(in srgb, var(--card) 90%, var(--adcom) 10%); + border-color: color-mix(in srgb, var(--border) 55%, var(--adcom) 45%); + } + .jumpNav .navBtn[data-scroll="playfabAdcomSection"]:hover, + .inlineJump .navBtn[data-scroll="playfabAdcomSection"]:hover { + background: color-mix(in srgb, var(--card) 84%, var(--adcom) 16%); + } + + .jumpNav .navBtn[data-scroll="playfabAdcapSection"], + .inlineJump .navBtn[data-scroll="playfabAdcapSection"] { + background: color-mix(in srgb, var(--card) 90%, var(--primary) 10%); + border-color: color-mix(in srgb, var(--border) 55%, var(--primary) 45%); + } + .jumpNav .navBtn[data-scroll="playfabAdcapSection"]:hover, + .inlineJump .navBtn[data-scroll="playfabAdcapSection"]:hover { + background: color-mix(in srgb, var(--card) 84%, var(--primary) 16%); + } .ok { color: var(--primary); } .err { color: #ef4444; white-space: pre-wrap; } .small { font-size: 12px; color: var(--muted); } @@ -182,7 +300,7 @@ .fieldBox textarea { min-height: 140px; } @keyframes uploadFlash { - 0% { background-color: #eafff6; } + 0% { background-color: var(--successBg); } 100% { background-color: var(--card); } } #uploadCard.flash { @@ -239,7 +357,7 @@ .toastHost { position: fixed; - top: 16px; + bottom: 16px; right: 16px; display: grid; gap: 10px; @@ -298,51 +416,79 @@ -
+
Jump to
- +
-
-
+
+
-

📦 Google Play output

+

📦 Google Play output

Tagged format like <en-US>...</en-US>
- +
+ Google Console + +
- -
- -
-

🍎 App Store Connect output

-
-
- -
-

📰 PlayFab News output (AdCap only)

-
Add this JSON to: AdCap > TitleData > Primary Title Data > newsfeed_mobile (PlayFab).
-
Requires a valid game version above. Uses English text only.
-
-
Output JSON
- +
+
-
-
-

🗞️ PlayFab News output (AdCom/AdAges)

-
Per-language Title + Body. Requires a valid game version above.
-
+
+
+
+

🍎 App Store Connect output

+
Per-locale text blocks (copy individually).
+
+ App Store Connect +
+
+
+
+
+ +
+
+
+

🗞️ PlayFab News output (AdCom/AdAges)

+
Per-language Title + Body (requires a valid game version).
+
+ PlayFab +
+
+
+
- + +
+
+
+

📰 PlayFab News output (AdCap only)

+
JSON for newsfeed_mobile.
+
+ PlayFab +
+
+
Add this JSON to: AdCap > TitleData > Primary Title Data > newsfeed_mobile (PlayFab).
+
Requires a valid game version above. Uses English text only.
+
+
Output JSON
+ +
+ +
+
+
Notes: @@ -359,6 +505,16 @@
+
+
Jump to
+
+ + + + +
+
+