Diff -- /var/www/vhosts/webstls.com/httpdocs/TEMPLATES/webstls

1

<!-- Category manager. Backed by either /categories.cgi (per-seller list)

2

or /admin_categories.cgi (admin default list new sellers receive

3

a copy of). $form_action + page header tvars switch between the

4

two. -->

5

6

7

<div>

8

<span class="page-eyebrow"><span class="dot"></span> $page_eyebrow</span>

9

<h1 class="page-title">$page_title</h1>

10

<p class="page-subtitle">$page_subtitle</p>

11

</div>

12

13

14

15

New category

16

</button>

17

</div>

18

</div>

19

20

[if:$has_flash]

21

22

23

<div class="text-sm fw-600">$flash_msg</div>

24

</div>

25

[/if]

26

27

<style>

28

/* Compact card: 3 rows -- full-width color banner with the category

29

name, then description, then slug + action buttons on the bottom

30

row floating right. The banner reads as a header strip so the

31

card has a clear visual hierarchy at a glance. */

32

.cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }

33

.cat-card { padding:0; border:1px solid var(--col-border); border-radius:10px; background:var(--col-surface-1); display:flex; flex-direction:column; overflow:hidden; }

34

/* Banner stretches full card width. Rounded only on top because

35

the card itself clips the corners (`overflow:hidden`). */

36

.cat-banner { display:flex; align-items:center; gap:6px; padding:8px 12px; font-size:13px; font-weight:700; color:#fff; min-width:0; }

37

.cat-banner-name { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

38

/* Emoji renders larger than the surrounding letters; a -1px vertical

39

nudge centers it visually against the smaller glyphs. */

40

.cat-banner-emoji { font-size:16px; line-height:1; display:inline-block; transform:translateY(-1px); flex-shrink:0; }

41

.cat-body { padding:8px 12px 10px; display:flex; flex-direction:column; gap:6px; }

42

.cat-desc { font-size:12px; color:var(--col-text-2); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:1.4em; }

43

.cat-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }

44

.cat-meta { font-size:10px; color:var(--col-text-3); letter-spacing:0.5px; text-transform:uppercase; display:flex; gap:10px; align-items:center; min-width:0; overflow:hidden; }

45

.cat-actions { display:flex; gap:4px; flex-shrink:0; }

46

.cat-actions .btn { padding:3px 9px; font-size:11px; }

47

.cat-empty { padding:60px 24px; text-align:center; border:1px dashed var(--col-border-2); border-radius:14px; color:var(--col-text-2); }

48

49

/* Modal */

50

.cat-modal { position:fixed; inset:0; background:rgba(8,11,24,0.78); display:none; align-items:center; justify-content:center; z-index:9000; padding:20px; }

51

.cat-modal.is-open { display:flex; }

52

.cat-modal-card { background:var(--col-surface-1); border:1px solid var(--col-border-2); border-radius:14px; padding:24px 28px; width:min(520px, 100%); max-height:90vh; overflow-y:auto; }

53

.cat-modal h2 { font-family:var(--font-display,inherit); font-size:22px; margin:0 0 6px; color:#fff; }

54

.cat-modal .helper { font-size:13px; color:var(--col-text-3); margin:0 0 18px; }

55

.cat-color-grid { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

56

.cat-color-grid input[type=radio] { display:none; }

57

.cat-color-grid label { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform .12s; }

58

.cat-color-grid input:checked + label { border-color:#fff; transform:scale(1.15); }

59

.cat-color-custom-wrap.is-active { border-style:solid !important; border-color:#fff !important; transform:scale(1.15); }

60

61

/* Emoji quick-pick grid. ~100 buttons, scrolls vertically so the

62

modal stays compact. Custom thin scrollbar so it doesn't stand

63

out against the modal surface. */

64

.cat-emoji-picker { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; padding:6px; background:var(--col-surface-2); border:1px solid var(--col-border); border-radius:8px; max-height:148px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--col-border-2) transparent; }

65

.cat-emoji-picker::-webkit-scrollbar { width:8px; }

66

.cat-emoji-picker::-webkit-scrollbar-thumb { background:var(--col-border-2); border-radius:4px; }

67

.cat-emoji-picker::-webkit-scrollbar-track { background:transparent; }

68

.cat-emoji-pick { width:32px; height:32px; padding:0; border:1px solid var(--col-border); background:var(--col-surface-1); border-radius:6px; font-size:18px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .12s,border-color .12s,transform .12s; color:var(--col-text); flex:0 0 auto; }

69

.cat-emoji-pick:hover { background:var(--grad-brand-soft); border-color:var(--col-accent); transform:scale(1.08); }

70

.cat-emoji-pick[data-clear="1"] { color:var(--col-text-3); font-size:14px; }

71

</style>

72

73

[if:!$has_cats]

74

75

76

<h2 style="color:#fff;font-family:var(--font-display,inherit);margin-bottom:8px">No categories yet</h2>

77

<p>Categories let you group listings on your storefront. Try <strong>"Halloween 2026"</strong>, <strong>"Patreon exclusive"</strong>, <strong>"Tabletop"</strong> — whatever organization your buyers will look for.</p>

78

<button type="button" class="btn btn-primary" id="catOpenNewEmpty" style="margin-top:14px">Create your first category</button>

79

</div>

80

[/if]

81

82

[if:$has_cats]

83

84

[loop:@cats]

85

86

87

[if:$loop1.icon]<span class="cat-banner-emoji">$loop1.icon</span>[/if]

88

89

</div>

90

91

<div class="cat-desc">$loop1.description</div>

92

93

94

95

[if:$show_counts]<span>$loop1.model_count listing(s)</span>[/if]

96

</div>

97

98

<button type="button" class="btn btn-secondary btn-sm cat-edit"

99

data-id="$loop1.id" data-name="$loop1.name" data-desc="$loop1.description"

100

data-color="$loop1.color" data-icon="$loop1.icon" data-sort="$loop1.sort_order"

101

data-public="$loop1.is_public">Edit</button>

102

<form method="POST" action="$form_action" style="display:inline"

103

data-confirm-title="Delete this category?"

104

data-confirm-message="Removing the category does not delete any listings. Tags pointing at it will simply drop from those listings."

105

data-confirm-label="Delete"

106

data-confirm-style="danger">

107

108

109

<button type="submit" class="btn btn-danger btn-sm">Delete</button>

110

</form>

111

</div>

112

</div>

113

</div>

114

</div>

115

[/loop]

116

</div>

117

[/if]

118

119

120

121

122

<h2 id="catModalTitle">New category</h2>

123

<p class="helper">Pick a chip color and an optional emoji. Both render on your storefront filter bar.</p>

124

125

126

127

128

129

130

131

</div>

132

133

134

<label class="form-label">Description <span class="text-xs text-dim">(optional)</span></label>

135

136

</div>

137

138

139

<label class="form-label">Chip color</label>

140

141

142

143

144

145

146

147

148

149

<!-- Custom color: the rainbow tile is visible, the native

150

color input sits transparently on top so the click hits

151

the actual input (label-for tricks don't reliably open

152

native color pickers in Chrome). -->

153

<div class="cat-color-custom-wrap" title="Pick a custom color"

154

style="position:relative;width:28px;height:28px;border-radius:50%;border:2px dashed var(--col-border-2);overflow:hidden;background:conic-gradient(from 0deg,#b91c1c,#b45309,#047857,#0e7490,#1d4ed8,#6d28d9,#be185d,#b91c1c);">

155

156

<input type="color" id="catColorCustom" value="#6d28d9"

157

style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0;background:transparent">

158

</div>

159

</div>

160

<!-- One hidden field carries the actual value either swatch or

161

picker put into it. Keeps the server-side handler simple. -->

162

163

</div>

164

165

<!-- Emoji + picker takes a full row (the picker is wide; cramming

166

it into a 2-col grid wastes ~half the modal). Sort order +

167

Show-on-storefront move below into their own row. -->

168

<div>

169

170

<label class="form-label">Emoji <span class="text-xs text-dim">(optional)</span></label>

171

172

173

<!-- ~100 emojis grouped by theme. Click inserts into the

174

field; the X at the end clears. Buttons not links so

175

they don't submit the form. -->

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

</div>

429

<div class="text-xs text-dim" style="margin-top:4px;line-height:1.4">Click an emoji above (scroll for more), or type your own. Win+. on Windows / Ctrl+Cmd+Space on Mac opens the OS emoji picker.</div>

430

</div>

431

</div>

432

433

434

435

<label class="form-label">Sort order</label>

436

437

</div>

438

439

440

441

<span>Show on storefront filter bar</span>

442

</label>

443

</div>

444

</div>

445

446

447

<button type="button" class="btn btn-secondary" id="catCancel">Cancel</button>

448

<button type="submit" class="btn btn-primary">Save category</button>

449

</div>

450

</form>

451

</div>

452

</div>

453

454

455

(function(){

456

var modal = document.getElementById('catModal');

457

var titleEl = document.getElementById('catModalTitle');

458

var form = document.getElementById('catForm');

459

var actInput = document.getElementById('catAct');

460

var idInput = document.getElementById('catId');

461

var nameInput = document.getElementById('catName');

462

var descInput = document.getElementById('catDesc');

463

var iconInput = document.getElementById('catIcon');

464

var sortInput = document.getElementById('catSort');

465

var publicInput = document.getElementById('catPublic');

466

var colorHidden = document.getElementById('catColor');

467

var colorPicker = document.getElementById('catColorCustom');

468

var customWrap = document.querySelector('.cat-color-custom-wrap');

469

var customDot = document.getElementById('catCustomDot');

470

var swatches = document.querySelectorAll('#catColors input[type=radio]');

471

472

function applySwatch(value) {

473

colorHidden.value = value;

474

customDot.style.display = 'none';

475

customWrap.classList.remove('is-active');

476

}

477

function applyCustom(value) {

478

colorHidden.value = value;

479

swatches.forEach(function(r){ r.checked = false; });

480

customDot.style.background = value;

481

customDot.style.display = 'block';

482

customWrap.classList.add('is-active');

483

}

484

485

swatches.forEach(function(r){

486

r.addEventListener('change', function(){ if (r.checked) applySwatch(r.value); });

487

});

488

// 'input' fires while dragging; 'change' fires when the dialog

489

// closes. Listen to both so the chip preview tracks the picker live

490

// and the final value is committed even if the user clicks away

491

// without releasing on a color.

492

colorPicker.addEventListener('input', function(){ applyCustom(colorPicker.value); });

493

colorPicker.addEventListener('change', function(){ applyCustom(colorPicker.value); });

494

495

function setColorFromValue(c) {

496

var matched = false;

497

swatches.forEach(function(r){

498

if (r.value.toLowerCase() === c.toLowerCase()) { r.checked = true; matched = true; }

499

else { r.checked = false; }

500

});

501

if (matched) { applySwatch(c); }

502

else { applyCustom(c); colorPicker.value = c; }

503

}

504

505

// Emoji quick-pick: insert clicked emoji into the icon field.

506

document.querySelectorAll('.cat-emoji-pick').forEach(function(b){

507

b.addEventListener('click', function(){

508

if (b.dataset.clear) { iconInput.value = ''; }

509

else { iconInput.value = b.textContent.trim(); }

510

});

511

});

512

513

function openNew() {

514

titleEl.textContent = 'New category';

515

actInput.value = 'create';

516

idInput.value = '';

517

nameInput.value = '';

518

descInput.value = '';

519

iconInput.value = '';

520

sortInput.value = '0';

521

publicInput.checked = true;

522

setColorFromValue('#6d28d9');

523

modal.classList.add('is-open');

524

setTimeout(function(){ nameInput.focus(); }, 50);

525

}

526

function openEdit(btn) {

527

titleEl.textContent = 'Edit category';

528

actInput.value = 'update';

529

idInput.value = btn.dataset.id;

530

nameInput.value = btn.dataset.name || '';

531

descInput.value = btn.dataset.desc || '';

532

iconInput.value = btn.dataset.icon || '';

533

sortInput.value = btn.dataset.sort || '0';

534

publicInput.checked = btn.dataset.public === '1';

535

setColorFromValue(btn.dataset.color || '#6d28d9');

536

modal.classList.add('is-open');

537

}

538

function close() { modal.classList.remove('is-open'); }

539

var newBtn = document.getElementById('catOpenNew');

540

if (newBtn) newBtn.addEventListener('click', openNew);

541

var newBtnEmpty = document.getElementById('catOpenNewEmpty');

542

if (newBtnEmpty) newBtnEmpty.addEventListener('click', openNew);

543

document.querySelectorAll('.cat-edit').forEach(function(b){

544

b.addEventListener('click', function(){ openEdit(b); });

545

});

546

document.getElementById('catCancel').addEventListener('click', close);

547

modal.addEventListener('click', function(e){ if (e.target === modal) close(); });

548

document.addEventListener('keydown', function(e){ if (e.key === 'Escape') close(); });

549

})();

550

</script>

/var/www/vhosts/webstls.com/httpdocs/TEMPLATES/webstls_categories.html