diff --git a/index.html b/index.html index f1e27ec..2b6245f 100644 --- a/index.html +++ b/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 @@
+

๐Ÿงพ Release Notes Formatter

Upload a Gridly CSV export.

-
-
- -
- โฌ‡๏ธ Drag & drop CSV - or click to browse +
+
+ +
+
โฌ‡๏ธ
+
Drag & drop your Gridly CSV here
+
or click anywhere in this box to browse
+
+
+
+ +
+ + +
Used for PlayFab News titles only. Format: x.xx.x
-
-
-
- -
Used for PlayFab News titles only. Format: x.xx.x
-
-
- -
@@ -265,7 +333,7 @@
Output JSON
- +
@@ -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;