gopi/ReleaseNotesFormatter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more Ui changes

Browse Source
This commit is contained in:
Gurpreet Singh
2026-01-16 18:33:18 -05:00
parent 7126fd7497
commit d521575bcf
1 changed files with 186 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
index.html
View File

@@ -21,6 +21,7 @@
--primary: #0D9488; /* teal */ --primary: #0D9488; /* teal */
--primary2: #146C94; /* deep blue */ --primary2: #146C94; /* deep blue */
--accent: #FF6B6B; /* coral */ --accent: #FF6B6B; /* coral */
--adcom: #f59e0b; /* amber/yellow */
--successBg: #eafff6; --successBg: #eafff6;
} }
@@ -33,6 +34,7 @@
--border: rgba(226,232,240,0.14); --border: rgba(226,232,240,0.14);
--shadow: 0 12px 34px rgba(0,0,0,0.40); --shadow: 0 12px 34px rgba(0,0,0,0.40);
--successBg: rgba(13,148,136,0.16); --successBg: rgba(13,148,136,0.16);
--adcom: #fbbf24; /* amber/yellow for dark */
} }
body { body {
@@ -42,6 +44,8 @@
background: radial-gradient(1200px 600px at 10% 0%, var(--bg2), var(--bg)); background: radial-gradient(1200px 600px at 10% 0%, var(--bg2), var(--bg));
color: var(--text); color: var(--text);
} }
/* Prevent horizontal overflow from padding/borders */
*, *::before, *::after { box-sizing: border-box; }
.container { .container {
width: min(92vw, 1120px); width: min(92vw, 1120px);
@@ -56,7 +60,55 @@
padding: 16px; padding: 16px;
background: var(--card); background: var(--card);
box-shadow: var(--shadow); 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; } .muted { color: var(--muted); font-size: 14px; }
.btn { .btn {
padding: 9px 12px; padding: 9px 12px;
@@ -83,6 +135,7 @@
border: 1px solid var(--border); border: 1px solid var(--border);
background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%); background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%);
color: var(--text); color: var(--text);
box-sizing: border-box;
} }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; } .grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.topbar { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; } .topbar { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
@@ -114,6 +167,30 @@
color: var(--text); color: var(--text);
} }
.navRow { display: flex; flex-wrap: wrap; gap: 10px; } .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 { .navBtn {
padding: 8px 10px; padding: 8px 10px;
border-radius: 999px; border-radius: 999px;
@@ -128,6 +205,47 @@
background: color-mix(in srgb, var(--card) 86%, var(--primary2) 14%); background: color-mix(in srgb, var(--card) 86%, var(--primary2) 14%);
border-color: color-mix(in srgb, var(--border) 60%, var(--primary2) 40%); 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); } .ok { color: var(--primary); }
.err { color: #ef4444; white-space: pre-wrap; } .err { color: #ef4444; white-space: pre-wrap; }
.small { font-size: 12px; color: var(--muted); } .small { font-size: 12px; color: var(--muted); }
@@ -182,7 +300,7 @@
.fieldBox textarea { min-height: 140px; } .fieldBox textarea { min-height: 140px; }
@keyframes uploadFlash { @keyframes uploadFlash {
0% { background-color: #eafff6; } 0% { background-color: var(--successBg); }
100% { background-color: var(--card); } 100% { background-color: var(--card); }
} }
#uploadCard.flash { #uploadCard.flash {
@@ -239,7 +357,7 @@
.toastHost { .toastHost {
position: fixed; position: fixed;
top: 16px; bottom: 16px;
right: 16px; right: 16px;
display: grid; display: grid;
gap: 10px; gap: 10px;
@@ -298,51 +416,79 @@
</div> </div>
</div> </div>
<div class="card" style="padding: 12px;"> <div class="card inlineJump" style="padding: 12px;">
<div class="small muted" style="margin-bottom: 6px; font-weight: 600;">Jump to</div> <div class="small muted" style="margin-bottom: 6px; font-weight: 600;">Jump to</div>
<div class="navRow"> <div class="navRow">
<button class="navBtn" type="button" data-scroll="googleSection">Google</button> <button class="navBtn" type="button" data-scroll="googleSection">Google</button>
<button class="navBtn" type="button" data-scroll="appleSection">Apple</button> <button class="navBtn" type="button" data-scroll="appleSection">Apple</button>
<button class="navBtn" type="button" data-scroll="playfabAdcapSection">Playfab (AdCap)</button>
<button class="navBtn" type="button" data-scroll="playfabAdcomSection">Playfab (AdCom/AdAges)</button> <button class="navBtn" type="button" data-scroll="playfabAdcomSection">Playfab (AdCom/AdAges)</button>
<button class="navBtn" type="button" data-scroll="playfabAdcapSection">Playfab (AdCap)</button>
</div> </div>
</div> </div>
<div class="grid2"> <div class="grid2">
<div class="card" id="googleSection"> <div class="card sectionCard sectionGoogle" id="googleSection">
<div class="topbar" style="justify-content: space-between;"> <div class="sectionHeader">
<div> <div>
<h3 style="margin:0 0 6px 0;">📦 Google Play output</h3> <h3 class="sectionTitle" style="margin:0 0 6px 0;">📦 Google Play output</h3>
<div class="muted">Tagged format like &lt;en-US&gt;...&lt;/en-US&gt;</div> <div class="muted">Tagged format like &lt;en-US&gt;...&lt;/en-US&gt;</div>
</div> </div>
<button class="btn" id="btnCopyGoogle" disabled><span class="btnLabel">Copy</span></button> <div style="display:flex; flex-direction: column; align-items: flex-end; gap: 8px;">
<span class="sectionBadge">Google Console</span>
<button class="btn" id="btnCopyGoogle" disabled><span class="btnLabel">Copy</span></button>
</div>
</div> </div>
<textarea id="outGoogle" readonly></textarea> <div class="sectionBody">
</div> <textarea id="outGoogle" readonly></textarea>
<div class="card" id="appleSection">
<h3 style="margin:0 0 6px 0;">🍎 App Store Connect output</h3>
<div id="ascBoxes" class="ascGrid"></div>
</div>
<div class="card" id="playfabAdcapSection">
<h3 style="margin:0 0 6px 0;">📰 PlayFab News output (AdCap only)</h3>
<div class="muted" style="margin-bottom: 10px;">Add this JSON to: AdCap &gt; TitleData &gt; Primary Title Data &gt; <code>newsfeed_mobile</code> (PlayFab).</div>
<div id="adcapHelp" class="small muted" style="margin-bottom: 10px;">Requires a valid game version above. Uses English text only.</div>
<div class="topbar" style="justify-content: space-between;">
<div class="small muted">Output JSON</div>
<button class="btn" id="btnCopyAdcap" disabled><span class="btnLabel">Copy</span></button>
</div> </div>
<textarea id="outAdcap" readonly rows="3" style="min-height: 92px;"></textarea>
</div> </div>
<div class="card" id="playfabAdcomSection"> <div class="card sectionCard sectionApple" id="appleSection">
<h3 style="margin:0 0 6px 0;">🗞️ PlayFab News output (AdCom/AdAges)</h3> <div class="sectionHeader">
<div class="muted">Per-language Title + Body. Requires a valid game version above.</div> <div>
<div id="playfabBoxes" class="ascGrid singleCol"></div> <h3 class="sectionTitle" style="margin:0 0 6px 0;">🍎 App Store Connect output</h3>
<div class="muted">Per-locale text blocks (copy individually).</div>
</div>
<span class="sectionBadge">App Store Connect</span>
</div>
<div class="sectionBody">
<div id="ascBoxes" class="ascGrid"></div>
</div>
</div>
<div class="card sectionCard sectionAdcom" id="playfabAdcomSection">
<div class="sectionHeader">
<div>
<h3 class="sectionTitle" style="margin:0 0 6px 0;">🗞️ PlayFab News output (AdCom/AdAges)</h3>
<div class="muted">Per-language Title + Body (requires a valid game version).</div>
</div>
<span class="sectionBadge">PlayFab</span>
</div>
<div class="sectionBody">
<div id="playfabBoxes" class="ascGrid singleCol"></div>
</div>
</div> </div>
</div> </div>
<div class="card sectionCard sectionAdcap" id="playfabAdcapSection">
<div class="sectionHeader">
<div>
<h3 class="sectionTitle" style="margin:0 0 6px 0;">📰 PlayFab News output (AdCap only)</h3>
<div class="muted">JSON for newsfeed_mobile.</div>
</div>
<span class="sectionBadge">PlayFab</span>
</div>
<div class="sectionBody">
<div class="muted" style="margin-bottom: 10px;">Add this JSON to: AdCap &gt; TitleData &gt; Primary Title Data &gt; <code>newsfeed_mobile</code> (PlayFab).</div>
<div id="adcapHelp" class="small muted" style="margin-bottom: 10px;">Requires a valid game version above. Uses English text only.</div>
<div class="topbar" style="justify-content: space-between; margin-bottom: 8px;">
<div class="small muted">Output JSON</div>
<button class="btn" id="btnCopyAdcap" disabled><span class="btnLabel">Copy</span></button>
</div>
<textarea id="outAdcap" readonly rows="3" style="min-height: 92px;"></textarea>
</div>
</div>
<div class="card"> <div class="card">
<div class="muted"> <div class="muted">
Notes: Notes:
@@ -359,6 +505,16 @@
</div> </div>
</div> </div>
<div class="card jumpNav" aria-label="Jump to">
<div class="small muted" style="margin-bottom: 8px; font-weight: 700;">Jump to</div>
<div class="navRow">
<button class="navBtn" type="button" data-scroll="googleSection">Google</button>
<button class="navBtn" type="button" data-scroll="appleSection">Apple</button>
<button class="navBtn" type="button" data-scroll="playfabAdcomSection">Playfab (AdCom/AdAges)</button>
<button class="navBtn" type="button" data-scroll="playfabAdcapSection">Playfab (AdCap)</button>
</div>
</div>
<div id="toastHost" class="toastHost"></div> <div id="toastHost" class="toastHost"></div>
<script> <script>
@@ -447,19 +603,13 @@
// Restore saved settings // Restore saved settings
(function initPrefs() { (function initPrefs() {
try { try {
const savedVersion = localStorage.getItem("rn_gameVersion"); // Theme persists; game version should clear on refresh.
if (savedVersion && !gameVersionInput.value) gameVersionInput.value = savedVersion;
const theme = localStorage.getItem("rn_theme") || "light"; const theme = localStorage.getItem("rn_theme") || "light";
document.documentElement.setAttribute("data-theme", theme); document.documentElement.setAttribute("data-theme", theme);
if (btnTheme) btnTheme.textContent = theme === "dark" ? "☀️" : "🌙"; if (btnTheme) btnTheme.textContent = theme === "dark" ? "☀️" : "🌙";
} catch {} } catch {}
})(); })();
gameVersionInput.addEventListener("input", () => {
try { localStorage.setItem("rn_gameVersion", gameVersionInput.value || ""); } catch {}
});
if (btnTheme) { if (btnTheme) {
btnTheme.addEventListener("click", () => { btnTheme.addEventListener("click", () => {
const cur = document.documentElement.getAttribute("data-theme") || "light"; const cur = document.documentElement.getAttribute("data-theme") || "light";