More Ui updates
This commit is contained in:
Gurpreet Singh
118
index.html
118
index.html
@@ -44,8 +44,8 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(92vw, 1500px);
|
||||
max-width: 1500px;
|
||||
width: min(92vw, 1120px);
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
padding: 26px 18px 56px;
|
||||
}
|
||||
@@ -85,7 +85,34 @@
|
||||
color: var(--text);
|
||||
}
|
||||
.grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
|
||||
.topbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||||
.topbar { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
|
||||
.uploadRow {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.uploadRow > .dropZone {
|
||||
flex: 1 1 420px;
|
||||
min-width: 320px;
|
||||
}
|
||||
.uploadRow > .versionBox {
|
||||
flex: 1 1 420px;
|
||||
min-width: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.versionBox input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: color-mix(in srgb, var(--card) 92%, var(--bg) 8%);
|
||||
color: var(--text);
|
||||
}
|
||||
.navRow { display: flex; flex-wrap: wrap; gap: 10px; }
|
||||
.navBtn {
|
||||
padding: 8px 10px;
|
||||
@@ -105,7 +132,45 @@
|
||||
.err { color: #ef4444; white-space: pre-wrap; }
|
||||
.small { font-size: 12px; color: var(--muted); }
|
||||
label { font-weight: 600; }
|
||||
input[type="file"] { padding: 6px; }
|
||||
.dropZone {
|
||||
border: 1.5px dashed color-mix(in srgb, var(--border) 55%, var(--primary2) 45%);
|
||||
border-radius: 14px;
|
||||
padding: 18px;
|
||||
background: color-mix(in srgb, var(--card) 88%, var(--primary2) 12%);
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease, background 180ms ease;
|
||||
}
|
||||
.dropZone:hover {
|
||||
background: color-mix(in srgb, var(--card) 84%, var(--primary2) 16%);
|
||||
border-color: color-mix(in srgb, var(--border) 40%, var(--primary2) 60%);
|
||||
}
|
||||
.dropZone.dragOver {
|
||||
border-color: var(--primary2);
|
||||
box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary2) 18%, transparent 82%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.dropZone input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
.dropZoneContent {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
place-items: center;
|
||||
}
|
||||
.dropZoneIcon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
.dropZoneTitle {
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.ascGrid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 10px; }
|
||||
.singleCol { grid-template-columns: 1fr !important; }
|
||||
.ascBoxHeader { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 8px; }
|
||||
@@ -204,29 +269,32 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<button class="btn" id="btnTheme" type="button" title="Toggle dark mode" style="position: fixed; top: 18px; right: 18px; z-index: 10000; border-radius: 999px; padding: 10px 12px;">
|
||||
🌙
|
||||
</button>
|
||||
<h2 style="margin: 0 0 6px 0;">🧾 Release Notes Formatter</h2>
|
||||
<p class="muted" style="margin: 0 0 14px 0;">Upload a Gridly CSV export.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="card" id="uploadCard">
|
||||
<div class="topbar">
|
||||
<div class="dropZone" id="dropZone" title="Drag & drop a CSV here">
|
||||
<label for="file">CSV file</label><br/>
|
||||
<div class="uploadRow">
|
||||
<div class="dropZone" id="dropZone" title="Drag & drop a CSV here or click to browse">
|
||||
<input id="file" type="file" accept=".csv,text/csv" />
|
||||
<div class="topbar" style="margin-top:8px; gap: 8px;">
|
||||
<span class="hintPill">⬇️ Drag & drop CSV</span>
|
||||
<span class="hintPill">or click to browse</span>
|
||||
<div class="dropZoneContent">
|
||||
<div class="dropZoneIcon">⬇️</div>
|
||||
<div class="dropZoneTitle">Drag & drop your Gridly CSV here</div>
|
||||
<div class="small muted">or click anywhere in this box to browse</div>
|
||||
<div id="fileInfo" class="small" style="margin-top:6px;"></div>
|
||||
</div>
|
||||
<div id="fileInfo" class="small" style="margin-top:8px;"></div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="gameVersion">Game version</label><br/>
|
||||
<input id="gameVersion" type="text" inputmode="decimal" placeholder="e.g. 6.51.0" style="padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.15); background:#fff; min-width: 160px;" />
|
||||
<div id="versionHelp" class="small muted">Used for PlayFab News titles only. Format: x.xx.x</div>
|
||||
|
||||
<div class="versionBox">
|
||||
<label for="gameVersion">Game version</label>
|
||||
<input id="gameVersion" type="text" inputmode="decimal" placeholder="e.g. 6.51.0" />
|
||||
<div id="versionHelp" class="small muted" style="margin-top:6px;">Used for PlayFab News titles only. Format: x.xx.x</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1"></div>
|
||||
<button class="btn" id="btnRefresh" disabled>Refresh</button>
|
||||
<button class="btn" id="btnTheme" type="button" title="Toggle dark mode">🌙</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -265,7 +333,7 @@
|
||||
<div class="small muted">Output JSON</div>
|
||||
<button class="btn" id="btnCopyAdcap" disabled><span class="btnLabel">Copy</span></button>
|
||||
</div>
|
||||
<textarea id="outAdcap" readonly></textarea>
|
||||
<textarea id="outAdcap" readonly rows="3" style="min-height: 92px;"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="card" id="playfabAdcomSection">
|
||||
@@ -364,7 +432,6 @@
|
||||
const outGoogle = document.getElementById("outGoogle");
|
||||
const ascBoxes = document.getElementById("ascBoxes");
|
||||
const btnCopyGoogle = document.getElementById("btnCopyGoogle");
|
||||
const btnRefresh = document.getElementById("btnRefresh");
|
||||
const dropZone = document.getElementById("dropZone");
|
||||
const btnTheme = document.getElementById("btnTheme");
|
||||
const toastHost = document.getElementById("toastHost");
|
||||
@@ -536,8 +603,8 @@
|
||||
const ta = document.createElement("textarea");
|
||||
ta.readOnly = true;
|
||||
ta.value = title;
|
||||
ta.rows = 3;
|
||||
ta.style.minHeight = "72px";
|
||||
ta.rows = 1;
|
||||
ta.style.minHeight = "44px";
|
||||
|
||||
wrap.className = "fieldBox";
|
||||
wrap.appendChild(headerRow);
|
||||
@@ -877,6 +944,8 @@
|
||||
const ta = document.createElement("textarea");
|
||||
ta.readOnly = true;
|
||||
ta.value = block;
|
||||
ta.rows = 5;
|
||||
ta.style.minHeight = "120px";
|
||||
|
||||
card.appendChild(header);
|
||||
card.appendChild(ta);
|
||||
@@ -929,7 +998,6 @@
|
||||
outGoogle.value = "";
|
||||
ascBoxes.innerHTML = "";
|
||||
btnCopyGoogle.disabled = true;
|
||||
btnRefresh.disabled = true;
|
||||
skippedLocalesEl.textContent = "Upload a CSV to see results.";
|
||||
clearPlayfab();
|
||||
clearAdcap();
|
||||
@@ -985,7 +1053,6 @@
|
||||
}
|
||||
|
||||
window.__lastParsedPayload = { rowObj, headers, recordId };
|
||||
btnRefresh.disabled = false;
|
||||
flashUploadCard();
|
||||
|
||||
__uploadCount += 1;
|
||||
@@ -1046,11 +1113,6 @@
|
||||
}
|
||||
});
|
||||
|
||||
btnRefresh.addEventListener("click", () => {
|
||||
const payload = window.__lastParsedPayload;
|
||||
if (!payload) return;
|
||||
regenerateFromPayload(payload);
|
||||
});
|
||||
|
||||
gameVersionInput.addEventListener("input", () => {
|
||||
const payload = window.__lastParsedPayload;
|
||||
|
||||
Reference in New Issue
Block a user