SIGNAL STATIC: playlist codes, batch 3-1

[gelateria]

Playlist layouts - batch 03

Batch 03 leans further into panels, head units, presets and shelf systems.

There is a slightly cleaner, more indexed feel through these ten, with stronger labels and more visible display framing. Once again, the length of the post was too long, so I had to cut the last three off.  All of the missing codes will be in a code overflow post at the end when I have finished posting this series.

The live preview comes first, with the copyable HTML directly underneath each layout.

21. Chrome Headunit

DISPLAY

Lyrics go here.

 

EJECT

WARN DETACH PANEL BEFORE LEAVINGDXLOC

FM88.5MHzSTSTEREO

RDS - NEW WAVE HITS - TR 03

1 2 3 4 5 6

MOSFET - 45W x 4XDP-4000X

BAND A

FM presets row

TUNE

01

Song title 01

Lyrics go here.

3:24 TUNE

02

Song title 02

Lyrics go here.

2:58 SEEK

03

Song title 03

Lyrics go here.

4:01 TUNE

04

Song title 04

Lyrics go here.

3:12 SEEK

PRESET ROW

memory slots

SEEK

01

Song title 05

Lyrics go here.

3:24 TUNE

02

Song title 06

Lyrics go here.

2:58 SEEK

03

Song title 07

Lyrics go here.

4:01 TUNE

04

Song title 08

Lyrics go here.

3:12 SEEK

Batch 03

A dashboard-style layout with metallic trim and a direct, display-led face.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:linear-gradient(180deg,#faf9f6 0%,#ffffff 48%);border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 4px 20px rgba(18,28,38,0.12),0 1px 4px rgba(18,28,38,0.06);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:20px 22px 24px"> <div style="box-sizing:border-box;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box;margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:#3d4f5e;font-weight:700">CAR HEAD UNIT / SEGMENT</div> <h2 style="box-sizing:border-box;margin:0 0 8px;font:700 22px/1.25 Georgia, serif;color:#1a2633">Chrome Headunit</h2> <p style="box-sizing:border-box;margin:0;font-size:13px;line-height:1.5;color:#3d4f5e">Faceplate wobbles on rough roads. Preset 3 is the only one anyone remembers.</p> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:14px 16px;min-height:52px;border-radius:4px;background:#1a1610;border:1px solid #3a3020"> <div style="box-sizing:border-box;margin-bottom:6px;font-size:9px;font-weight:700;letter-spacing:0.08em;color:#e8960a;text-transform:uppercase;font-family:'Courier New',monospace">DISPLAY</div> <div style="box-sizing:border-box;font:italic 15px/1.55 Georgia, serif;color:#fff4e0">Lyrics go here.</div> <div style="margin-top:8px;border-bottom:1px solid rgba(232,150,10,0.4)"></div> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:9px 11px 10px;background:linear-gradient(180deg,#242018 0%,#141008 100%);border:1px solid #3a3020;border-radius:5px;position:relative;box-shadow:inset 0 1px 0 rgba(232,150,10,0.1),inset 0 -1px 0 rgba(0,0,0,0.5)"> <span style="position:absolute;top:3px;left:5px;width:3px;height:3px;border:1px solid rgba(232,150,10,0.35);border-radius:50%;background:#1a1610"></span> <span style="position:absolute;top:3px;right:5px;display:flex;gap:2px;align-items:center"><span style="font-size:5px;color:rgba(232,150,10,0.5);letter-spacing:0.1em;font-weight:700">EJECT</span><span style="width:8px;height:5px;background:#2a2018;border:1px solid #4a3828;border-radius:1px;position:relative"><span style="position:absolute;top:0;left:50%;width:3px;height:1px;background:rgba(232,150,10,0.5);transform:translateX(-50%)"></span></span></span> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin:8px 0 5px;padding:0 2px"><span style="font-size:6px;font-weight:700;letter-spacing:0.08em;color:rgba(232,150,10,0.6)">WARN DETACH PANEL BEFORE LEAVING</span><span style="display:flex;gap:3px"><span style="font-size:5px;padding:1px 3px;border:1px solid rgba(232,150,10,0.5);border-radius:1px;color:rgba(232,150,10,0.75);letter-spacing:0.08em">DX</span><span style="font-size:5px;padding:1px 3px;border:1px solid rgba(232,150,10,0.3);border-radius:1px;color:rgba(232,150,10,0.4);letter-spacing:0.08em">LOC</span></span></div> <div style="box-sizing:border-box;padding:6px 8px;background:#0a0804;border:1px solid #3a2818;border-radius:2px;margin-bottom:7px;box-shadow:inset 0 2px 3px rgba(0,0,0,0.7),inset 0 0 10px rgba(232,150,10,0.05)"> <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px"><span style="display:flex;gap:4px;align-items:baseline"><span style="font-size:6px;color:rgba(232,150,10,0.6);letter-spacing:0.1em;font-weight:700">FM</span><span style="font-family:'Courier New',monospace;font-size:13px;color:#e8960a;font-weight:700;letter-spacing:0.12em;text-shadow:0 0 4px rgba(232,150,10,0.5)">88.5</span><span style="font-size:6px;color:rgba(232,150,10,0.7);letter-spacing:0.1em;font-weight:700">MHz</span></span><span style="display:flex;gap:3px;align-items:center"><span style="font-size:5px;padding:1px 3px;background:#e8960a;color:#1a1010;letter-spacing:0.06em;font-weight:700;border-radius:1px">ST</span><span style="font-size:5px;color:rgba(232,150,10,0.4);letter-spacing:0.06em;font-weight:700">STEREO</span></span></div> <div style="font-family:'Courier New',monospace;font-size:7px;color:rgba(232,150,10,0.55);letter-spacing:0.06em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">RDS - NEW WAVE HITS - TR 03</div> </div> <div style="display:flex;gap:3px;justify-content:center;margin-bottom:5px"> <span style="padding:4px 0;flex:1;text-align:center;font-size:7px;background:linear-gradient(180deg,#3a2818,#1a1208);color:#e8960a;border:1px solid #4a3828;border-radius:1px;font-weight:700;letter-spacing:0.06em;box-shadow:inset 0 1px 0 rgba(232,150,10,0.08)">1</span> <span style="padding:4px 0;flex:1;text-align:center;font-size:7px;background:linear-gradient(180deg,#3a2818,#1a1208);color:#e8960a;border:1px solid #4a3828;border-radius:1px;font-weight:700;letter-spacing:0.06em;box-shadow:inset 0 1px 0 rgba(232,150,10,0.08)">2</span> <span style="padding:4px 0;flex:1;text-align:center;font-size:7px;background:linear-gradient(180deg,#f8b820,#c87808);color:#1a1010;border:1px solid #8a4a04;border-radius:1px;font-weight:700;letter-spacing:0.06em;box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 0 4px rgba(232,150,10,0.35)">3</span> <span style="padding:4px 0;flex:1;text-align:center;font-size:7px;background:linear-gradient(180deg,#3a2818,#1a1208);color:#e8960a;border:1px solid #4a3828;border-radius:1px;font-weight:700;letter-spacing:0.06em;box-shadow:inset 0 1px 0 rgba(232,150,10,0.08)">4</span> <span style="padding:4px 0;flex:1;text-align:center;font-size:7px;background:linear-gradient(180deg,#3a2818,#1a1208);color:#e8960a;border:1px solid #4a3828;border-radius:1px;font-weight:700;letter-spacing:0.06em;box-shadow:inset 0 1px 0 rgba(232,150,10,0.08)">5</span> <span style="padding:4px 0;flex:1;text-align:center;font-size:7px;background:linear-gradient(180deg,#3a2818,#1a1208);color:#e8960a;border:1px solid #4a3828;border-radius:1px;font-weight:700;letter-spacing:0.06em;box-shadow:inset 0 1px 0 rgba(232,150,10,0.08)">6</span> </div> <div style="display:flex;justify-content:space-between;align-items:center;font-size:5px;color:rgba(232,150,10,0.35);font-family:'Courier New',monospace;letter-spacing:0.12em;padding-top:4px;border-top:1px solid #3a2818"> <span>MOSFET - 45W x 4</span><span>XDP-4000X</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">BAND A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">FM presets row</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">TUNE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">TUNE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEEK</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">TUNE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEEK</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">PRESET ROW</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">memory slots</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">SEEK</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">TUNE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEEK</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">TUNE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SEEK</span> </div> </div> </div> </div>

A good fit for sharper playlists with a more display-led feel.

22. Crystal Panel

PROMPT

Lyrics go here.

(next line muted)

NEXT LINEMIC 1

CUE BAR - M. 120:08 / 3:24

 

 

REW BACK GO PLAY AIR

RTA - SM58 - -14 dB(next line muted)

QUEUE 01

lead mic / screen A

AIR

01

Song title 01

Lyrics go here.

3:24 AIR

02

Song title 02

Lyrics go here.

2:58 AIR

03

Song title 03

Lyrics go here.

4:01 AIR

04

Song title 04

Lyrics go here.

3:12 AIR

QUEUE 02

harmony / screen B

AIR

01

Song title 05

Lyrics go here.

3:24 AIR

02

Song title 06

Lyrics go here.

2:58 AIR

03

Song title 07

Lyrics go here.

4:01 AIR

04

Song title 08

Lyrics go here.

3:12 AIR

Batch 03

A cleaner panel layout with lighter surfaces and strong, tidy signposting.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:linear-gradient(180deg,#faf9f6 0%,#ffffff 48%);border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 4px 20px rgba(18,28,38,0.12),0 1px 4px rgba(18,28,38,0.06);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:20px 22px 24px"> <div style="box-sizing:border-box;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box;margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:#3d4f5e;font-weight:700">KARAOKE PROMPT / FROST</div> <h2 style="box-sizing:border-box;margin:0 0 8px;font:700 22px/1.25 Georgia, serif;color:#1a2633">Crystal Panel</h2> <p style="box-sizing:border-box;margin:0;font-size:13px;line-height:1.5;color:#3d4f5e">Teleprompter fan runs loud. Next line shows half a beat late on purpose.</p> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:14px 16px;min-height:52px;border-radius:4px;background:rgba(220,236,248,0.92);border:1px solid rgba(180,200,220,0.85)"> <div style="box-sizing:border-box;margin-bottom:6px;font-size:10px;font-weight:700;letter-spacing:0.08em;color:#2060c8;text-transform:uppercase">PROMPT</div> <div style="box-sizing:border-box;font:italic 16px/1.6 Georgia, serif;color:#1a2633">Lyrics go here.</div> <div style="margin-top:6px;font-size:9px;color:#3d4f5e;font-style:italic">(next line muted)</div> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:12px 14px 13px;background:linear-gradient(180deg,rgba(220,235,250,0.55) 0%,rgba(180,210,240,0.35) 100%);border:1px solid rgba(140,180,220,0.85);border-radius:6px;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,0.65),inset 0 0 14px rgba(32,96,200,0.08)"> <span style="position:absolute;top:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.85),transparent)"></span> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin-bottom:7px"><span style="display:flex;align-items:center;gap:5px;font-size:9px;color:#2060c8;font-weight:700;letter-spacing:0.06em"><span style="width:6px;height:6px;background:#2060c8;border-radius:50%;box-shadow:0 0 6px rgba(32,96,200,0.65)"></span>NEXT LINE</span><span style="display:flex;gap:3px;align-items:center"><span style="font-size:6px;color:rgba(32,96,200,0.55);letter-spacing:0.12em;font-weight:700">MIC 1</span><span style="display:inline-flex;align-items:flex-end;gap:1px"><span style="width:2px;height:4px;background:#2060c8"></span><span style="width:2px;height:6px;background:#2060c8"></span><span style="width:2px;height:8px;background:#2060c8"></span><span style="width:2px;height:5px;background:rgba(32,96,200,0.4)"></span><span style="width:2px;height:3px;background:rgba(32,96,200,0.25)"></span></span></span></div> <div style="box-sizing:border-box;padding:5px 7px;background:rgba(255,255,255,0.45);border:1px solid rgba(140,180,220,0.5);border-radius:3px;margin-bottom:7px;backdrop-filter:blur(1px)"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:3px"><span style="font-size:6px;color:rgba(32,96,200,0.7);letter-spacing:0.1em;font-weight:700">CUE BAR - M. 12</span><span style="font-size:6px;color:rgba(32,96,200,0.55);font-family:'Courier New',monospace;letter-spacing:0.06em">0:08 / 3:24</span></div> <div style="height:4px;background:rgba(32,96,200,0.18);border-radius:2px;overflow:hidden;position:relative"><div style="width:40%;height:100%;background:linear-gradient(90deg,#2060c8,#68a8f0);border-radius:2px;box-shadow:0 0 6px rgba(32,96,200,0.4)"></div><span style="position:absolute;top:-1px;bottom:-1px;left:40%;width:2px;background:#0a2a68"></span></div> </div> <div style="display:flex;gap:3px;align-items:center;justify-content:center;margin-bottom:7px"> <span style="width:4px;height:4px;background:#2060c8;border-radius:50%"></span> <span style="width:4px;height:4px;background:#2060c8;border-radius:50%"></span> <span style="width:4px;height:4px;background:#2060c8;border-radius:50%"></span> <span style="width:4px;height:4px;background:rgba(32,96,200,0.45);border-radius:50%"></span> <span style="width:4px;height:4px;background:rgba(32,96,200,0.25);border-radius:50%"></span> <span style="width:4px;height:4px;background:rgba(32,96,200,0.15);border-radius:50%"></span> <span style="width:4px;height:4px;background:rgba(32,96,200,0.15);border-radius:50%"></span> <span style="width:4px;height:4px;background:rgba(32,96,200,0.15);border-radius:50%"></span> </div> <div style="display:flex;gap:5px;justify-content:center"> <span style="padding:5px 11px;font-size:8px;font-weight:700;background:rgba(255,255,255,0.7);border:1px solid #2060c8;color:#2060c8;border-radius:4px;letter-spacing:0.06em;box-shadow:inset 0 1px 0 rgba(255,255,255,0.8)">REW BACK</span> <span style="padding:5px 15px;font-size:8px;font-weight:700;background:linear-gradient(180deg,#4a88e0,#1850b0);color:white;border-radius:4px;letter-spacing:0.06em;box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 0 5px rgba(32,96,200,0.4)">GO PLAY</span> <span style="padding:5px 9px;font-size:8px;font-weight:700;background:rgba(255,255,255,0.7);border:1px solid #2060c8;color:#2060c8;border-radius:4px;letter-spacing:0.06em;box-shadow:inset 0 1px 0 rgba(255,255,255,0.8)">AIR</span> </div> <div style="display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding-top:5px;border-top:1px solid rgba(140,180,220,0.35);font-size:6px;color:rgba(32,96,200,0.45);font-family:'Courier New',monospace;letter-spacing:0.1em"> <span>RTA - SM58 - -14 dB</span><span>(next line muted)</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">QUEUE 01</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">lead mic / screen A</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">AIR</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">AIR</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">AIR</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">AIR</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">AIR</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">QUEUE 02</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">harmony / screen B</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">AIR</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">AIR</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">AIR</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">AIR</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">AIR</span> </div> </div> </div> </div>

Keeps things tidy if you want the layout to read quickly at a glance.

23. Gold Display

LIVE

NOW PLAYING

- SEGMENT -

lower-third preview

title safe - 16:9 - 4:3 protect

 

CRAWL -6 dBFS CH 1/2 - SDI

SEGMENT 01

block A / title safe

ROLL

01

Song title 01

Lyrics go here.

3:24 ROLL

02

Song title 02

Lyrics go here.

2:58 ROLL

03

Song title 03

Lyrics go here.

4:01 ROLL

04

Song title 04

Lyrics go here.

3:12 ROLL

SEGMENT 02

block B / roll

ROLL

01

Song title 05

Lyrics go here.

3:24 ROLL

02

Song title 06

Lyrics go here.

2:58 ROLL

03

Song title 07

Lyrics go here.

4:01 ROLL

04

Song title 08

Lyrics go here.

3:12 ROLL

CHYRON

Lyrics go here.

Batch 03

A brighter interface layout with gold-toned highlights and a crisp screen feel.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:linear-gradient(180deg,#faf9f6 0%,#ffffff 48%);border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 4px 20px rgba(18,28,38,0.12),0 1px 4px rgba(18,28,38,0.06);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:20px 22px 24px"> <div style="box-sizing:border-box;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box;margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:#3d4f5e;font-weight:700">CABLE LOWER THIRD / CHYRON</div> <h2 style="box-sizing:border-box;margin:0 0 8px;font:700 22px/1.25 Georgia, serif;color:#1a2633">Gold Display</h2> <p style="box-sizing:border-box;margin:0;font-size:13px;line-height:1.5;color:#3d4f5e">Safe title crawls slow. Gold rule bleeds if you squint at the glass.</p> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:0;background:#2a3040;border:1px solid #1a2030;border-radius:4px;overflow:hidden;position:relative;box-shadow:inset 0 1px 0 rgba(109,189,242,0.08)"> <span style="position:absolute;top:6px;right:8px;display:flex;gap:3px;align-items:center;z-index:2"><span style="width:6px;height:6px;background:#c42828;border-radius:50%;box-shadow:0 0 5px rgba(196,40,40,0.75)"></span><span style="font-size:7px;font-weight:700;color:#e8e8f0;letter-spacing:0.12em">LIVE</span></span> <div style="padding:10px 11px 8px"> <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px"><span style="width:3px;height:14px;background:#c4a04a;box-shadow:0 0 3px rgba(196,160,74,0.5)"></span><div><div style="font-size:9px;font-weight:700;color:#6dbdf2;letter-spacing:0.1em;line-height:1.1">NOW PLAYING</div><div style="font-size:6px;color:rgba(109,189,242,0.5);letter-spacing:0.18em;margin-top:1px"> - SEGMENT - </div></div></div> <div style="font-size:11px;color:#c4a04a;font-style:italic;font-family:Georgia,serif;letter-spacing:0.02em;margin-bottom:2px">lower-third preview</div> <div style="font-size:8px;color:rgba(196,160,74,0.55);letter-spacing:0.06em;font-family:'Courier New',monospace">title safe - 16:9 - 4:3 protect</div> </div> <div style="height:2px;background:linear-gradient(90deg,transparent,#c4a04a 15%,#e8d060 50%,#c4a04a 85%,transparent);box-shadow:0 0 4px rgba(196,160,74,0.35)"></div> <div style="padding:5px 10px 7px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,#2e3446,#1a2030)"> <span style="display:flex;gap:3px;align-items:center"><span style="width:3px;height:3px;background:#6dbdf2;border-radius:50%"></span><span style="width:3px;height:3px;background:#6dbdf2;border-radius:50%"></span><span style="width:3px;height:3px;background:#6dbdf2;border-radius:50%"></span><span style="width:3px;height:3px;background:rgba(109,189,242,0.35);border-radius:50%"></span><span style="font-size:6px;color:rgba(109,189,242,0.55);letter-spacing:0.1em;margin-left:4px">CRAWL</span></span> <span style="display:flex;gap:4px;align-items:center"><span style="display:flex;gap:1px;height:6px"><span style="width:2px;background:#40a060"></span><span style="width:2px;background:#40a060"></span><span style="width:2px;background:#40a060"></span><span style="width:2px;background:#c4a04a"></span><span style="width:2px;background:rgba(196,40,40,0.7)"></span></span><span style="font-size:6px;color:rgba(109,189,242,0.45);letter-spacing:0.08em;font-family:'Courier New',monospace">-6 dBFS</span></span> <span style="font-size:6px;color:rgba(109,189,242,0.4);letter-spacing:0.08em;font-family:'Courier New',monospace">CH 1/2 - SDI</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">SEGMENT 01</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">block A / title safe</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">ROLL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">ROLL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">ROLL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">ROLL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">ROLL</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">SEGMENT 02</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">block B / roll</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">ROLL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">ROLL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">ROLL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">ROLL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">ROLL</span> </div> </div> <div style="box-sizing:border-box;margin:16px 0 0;padding:14px 16px;min-height:52px;background:#0a1a3a;border-top:2px solid #c4a04a;border-radius:0 0 4px 4px"> <div style="font-size:9px;font-weight:700;letter-spacing:0.12em;color:white;text-transform:uppercase;margin-bottom:6px">CHYRON</div> <div style="font:italic 15px/1.55 Georgia, serif;color:#f9fbfc;padding-left:12px">Lyrics go here.</div> </div> </div> </div>

Helpful when you want a brighter screen look without losing order.

24. Studio Panel

STREAM

Lyrics go here.

128 kbps - L:0042

SHOUTcast DNAS v1.9.8:: ADMIN

MOUNT

icecast.local:8000/lounge

BR128 kbps L0042 / 0250 UP03:47:12

 

CURRENT RELAY SRC MP3 - "Downtempo / Lounge"

MOUNT 01

stream source A

LOAD

01

Song title 01

Lyrics go here.

3:24 LOAD

02

Song title 02

Lyrics go here.

2:58 LOAD

03

Song title 03

Lyrics go here.

4:01 LOAD

04

Song title 04

Lyrics go here.

3:12 LOAD

MOUNT 02

relay B

LOAD

01

Song title 05

Lyrics go here.

3:24 LOAD

02

Song title 06

Lyrics go here.

2:58 LOAD

03

Song title 07

Lyrics go here.

4:01 LOAD

04

Song title 08

Lyrics go here.

3:12 LOAD

Batch 03

A studio-facing layout with firm structure and clear sectioning for denser playlists.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:linear-gradient(180deg,#faf9f6 0%,#ffffff 48%);border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 4px 20px rgba(18,28,38,0.12),0 1px 4px rgba(18,28,38,0.06);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:20px 22px 24px"> <div style="box-sizing:border-box;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box;margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:#3d4f5e;font-weight:700">SHOUTCAST / ICE RELAY</div> <h2 style="box-sizing:border-box;margin:0 0 8px;font:700 22px/1.25 Georgia, serif;color:#1a2633">Studio Panel</h2> <p style="box-sizing:border-box;margin:0;font-size:13px;line-height:1.5;color:#3d4f5e">Listeners count lies. Buffer climbs when the exchange routes wrong.</p> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:14px 16px;min-height:52px;border-radius:4px;background:#121820;border:1px solid #0a1018"> <div style="box-sizing:border-box;margin-bottom:6px;font-size:9px;font-weight:700;letter-spacing:0.06em;color:#3a8a50;text-transform:uppercase;font-family:'Courier New',monospace">STREAM</div> <div style="box-sizing:border-box;font:italic 15px/1.55 Georgia, serif;color:#d8e8dc">Lyrics go here.</div> <div style="margin-top:8px;display:flex;justify-content:space-between;font-size:8px;font-family:'Courier New',monospace;color:#c4a04a"><span>128 kbps - L:0042</span></div> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:0;background:#121820;border:1px solid #0a1018;border-radius:4px;font-family:'Courier New',monospace;box-shadow:inset 0 1px 0 rgba(58,138,80,0.08)"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;padding:4px 9px;background:linear-gradient(180deg,#1e2a32 0%,#0e1620 100%);border-bottom:1px solid #0a1018"><span style="display:flex;align-items:center;gap:5px"><span style="width:5px;height:5px;background:#3a8a50;border-radius:50%;box-shadow:0 0 3px rgba(58,138,80,0.7);animation:none"></span><span style="font-size:8px;color:#7ad8a8;font-weight:700;letter-spacing:0.08em">SHOUTcast DNAS v1.9.8</span></span><span style="font-size:7px;color:rgba(122,216,168,0.45);letter-spacing:0.06em">:: ADMIN</span></div> <div style="padding:9px 11px 10px"> <div style="box-sizing:border-box;margin-bottom:5px;padding:4px 7px;background:#0a1218;border:1px solid #1a2830;border-radius:2px"><div style="font-size:7px;color:rgba(58,138,80,0.55);margin-bottom:2px;letter-spacing:0.06em">MOUNT</div><div style="font-size:9px;color:#3a8a50;letter-spacing:0.04em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">icecast.local:8000/lounge</div></div> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#d8e8dc;margin-bottom:5px;padding:0 2px"> <span style="display:flex;gap:4px;align-items:center"><span style="font-size:7px;color:rgba(122,216,168,0.55);letter-spacing:0.08em">BR</span><span style="font-weight:700">128 kbps</span></span> <span style="display:flex;gap:4px;align-items:center"><span style="font-size:7px;color:rgba(122,216,168,0.55);letter-spacing:0.08em">L</span><span style="font-weight:700">0042 / 0250</span></span> <span style="display:flex;gap:4px;align-items:center"><span style="font-size:7px;color:rgba(122,216,168,0.55);letter-spacing:0.08em">UP</span><span style="font-weight:700">03:47:12</span></span> </div> <div style="height:3px;background:#0a1218;border:1px solid #1a2830;border-radius:1px;overflow:hidden;margin-bottom:7px;position:relative"><div style="width:55%;height:100%;background:linear-gradient(90deg,#3a8a50,#7ad8a8);border-radius:1px"></div><span style="position:absolute;top:0;bottom:0;left:33%;width:1px;background:rgba(0,0,0,0.35)"></span><span style="position:absolute;top:0;bottom:0;left:66%;width:1px;background:rgba(0,0,0,0.35)"></span></div> <div style="display:flex;gap:4px;align-items:center;font-size:7px;color:rgba(122,216,168,0.5);letter-spacing:0.1em"> <span style="display:flex;align-items:center;gap:3px"><span style="width:4px;height:4px;background:#3a8a50;border-radius:50%"></span>CURRENT</span> <span style="display:flex;align-items:center;gap:3px"><span style="width:4px;height:4px;background:rgba(58,138,80,0.35);border-radius:50%"></span>RELAY</span> <span style="display:flex;align-items:center;gap:3px"><span style="width:4px;height:4px;background:rgba(58,138,80,0.25);border-radius:50%"></span>SRC</span> <span style="margin-left:auto;font-size:6px;color:rgba(122,216,168,0.4);letter-spacing:0.08em">MP3 - "Downtempo / Lounge"</span> </div> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">MOUNT 01</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">stream source A</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">MOUNT 02</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">relay B</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> </div> </div> </div>

Best for denser playlists where clearer sectioning does more of the work.

25. Marble Fade

CUE

Lyrics go here.

 

DJM-500 - BATTLEHAMSTER

CH A

 

 

 

CH B

 

 

 

A B

KILL CUE FX

CH A

deck left / gain

CUE

01

Song title 01

Lyrics go here.

3:24 CUE

02

Song title 02

Lyrics go here.

2:58 KILL

03

Song title 03

Lyrics go here.

4:01 CUE

04

Song title 04

Lyrics go here.

3:12 KILL

CH B

deck right / gain

CUE

01

Song title 05

Lyrics go here.

3:24 CUE

02

Song title 06

Lyrics go here.

2:58 KILL

03

Song title 07

Lyrics go here.

4:01 CUE

04

Song title 08

Lyrics go here.

3:12 KILL

Batch 03

A softer display layout with blended tones and a smoother, more decorative finish.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:linear-gradient(180deg,#faf9f6 0%,#ffffff 48%);border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 4px 20px rgba(18,28,38,0.12),0 1px 4px rgba(18,28,38,0.06);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:20px 22px 24px"> <div style="box-sizing:border-box;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box;margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:#3d4f5e;font-weight:700">DJ MIXER / CROSSFADER</div> <h2 style="box-sizing:border-box;margin:0 0 8px;font:700 22px/1.25 Georgia, serif;color:#1a2633">Marble Fade</h2> <p style="box-sizing:border-box;margin:0;font-size:13px;line-height:1.5;color:#3d4f5e">Crossfader crackles at centre. Nobody agrees which deck is lead.</p> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:14px 16px;min-height:52px;border-radius:4px;background:#2a2e34;border:1px solid #1a1e22"> <div style="box-sizing:border-box;margin-bottom:6px;font-size:9px;font-weight:700;letter-spacing:0.06em;color:#c02020;text-transform:uppercase">CUE</div> <div style="box-sizing:border-box;font:italic 15px/1.55 Georgia, serif;color:#f5f2e8">Lyrics go here.</div> <div style="margin-top:8px;height:3px;background:#6a7a8a;border-radius:1px"><div style="width:35%;height:100%;background:#208040;border-radius:1px"></div></div> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:11px 13px 12px;background:linear-gradient(180deg,#2e3238 0%,#1a1e22 100%);border:1px solid #0a0c10;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),inset 0 -1px 0 rgba(0,0,0,0.4)"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin-bottom:7px"><span style="font-size:7px;color:rgba(200,216,232,0.55);letter-spacing:0.12em;font-weight:700">DJM-500 - BATTLE</span><span style="display:flex;gap:4px;align-items:center"><span style="font-size:6px;color:rgba(200,216,232,0.45);letter-spacing:0.08em">HAMSTER</span><span style="width:12px;height:6px;background:#1a1e22;border:1px solid #4a5058;border-radius:1px;position:relative"><span style="position:absolute;top:0;bottom:0;right:0;width:50%;background:#c4a04a;border-radius:0 1px 1px 0"></span></span></span></div> <div style="display:flex;gap:10px;margin-bottom:8px"> <div style="flex:1;display:flex;flex-direction:column;gap:4px"> <div style="display:flex;justify-content:space-between;align-items:center"><span style="font-size:7px;color:#8a9aa8;letter-spacing:0.1em;font-weight:700">CH A</span><span style="display:flex;gap:2px"><span style="width:3px;height:3px;background:#40a060;border-radius:50%;box-shadow:0 0 2px rgba(64,160,96,0.6)"></span><span style="width:3px;height:3px;background:rgba(64,160,96,0.3);border-radius:50%"></span></span></div> <div style="display:flex;gap:3px;justify-content:space-around;padding:2px 0"> <span style="width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a9aa8,#3a4552);border:1px solid #1a1e22;position:relative"><span style="position:absolute;top:10%;left:50%;width:1px;height:4px;background:#e8d060;transform:translateX(-50%)"></span></span> <span style="width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a9aa8,#3a4552);border:1px solid #1a1e22;position:relative"><span style="position:absolute;top:10%;left:50%;width:1px;height:4px;background:#e8d060;transform:translateX(-50%) rotate(25deg);transform-origin:bottom center"></span></span> <span style="width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a9aa8,#3a4552);border:1px solid #1a1e22;position:relative"><span style="position:absolute;top:10%;left:50%;width:1px;height:4px;background:#e8d060;transform:translateX(-50%) rotate(-15deg);transform-origin:bottom center"></span></span> </div> <div style="height:42px;background:linear-gradient(180deg,#4a5058 0%,#1a1e22 100%);border-radius:2px;border:1px solid #0a0c10;position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,0.5)"><span style="position:absolute;top:28%;left:2px;right:2px;height:2px;background:linear-gradient(180deg,#c4a04a,#8a6a20);border-radius:1px;box-shadow:0 0 3px rgba(196,160,74,0.4)"></span><span style="position:absolute;top:28%;left:2px;right:2px;height:6px;background:linear-gradient(180deg,#e8c060,#8a6a20);border:1px solid #3a2810;border-radius:1px;transform:translateY(-2px)"></span></div> <div style="display:flex;gap:1px;height:3px;padding:0 2px"><span style="flex:1;background:#40a060"></span><span style="flex:1;background:#40a060"></span><span style="flex:1;background:#40a060"></span><span style="flex:1;background:#c4a04a"></span><span style="flex:1;background:#c42828"></span><span style="flex:1;background:#2a3038"></span></div> </div> <div style="flex:1;display:flex;flex-direction:column;gap:4px"> <div style="display:flex;justify-content:space-between;align-items:center"><span style="font-size:7px;color:#8a9aa8;letter-spacing:0.1em;font-weight:700">CH B</span><span style="display:flex;gap:2px"><span style="width:3px;height:3px;background:rgba(64,160,96,0.3);border-radius:50%"></span><span style="width:3px;height:3px;background:#40a060;border-radius:50%;box-shadow:0 0 2px rgba(64,160,96,0.6)"></span></span></div> <div style="display:flex;gap:3px;justify-content:space-around;padding:2px 0"> <span style="width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a9aa8,#3a4552);border:1px solid #1a1e22;position:relative"><span style="position:absolute;top:10%;left:50%;width:1px;height:4px;background:#e8d060;transform:translateX(-50%) rotate(-20deg);transform-origin:bottom center"></span></span> <span style="width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a9aa8,#3a4552);border:1px solid #1a1e22;position:relative"><span style="position:absolute;top:10%;left:50%;width:1px;height:4px;background:#e8d060;transform:translateX(-50%)"></span></span> <span style="width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a9aa8,#3a4552);border:1px solid #1a1e22;position:relative"><span style="position:absolute;top:10%;left:50%;width:1px;height:4px;background:#e8d060;transform:translateX(-50%) rotate(30deg);transform-origin:bottom center"></span></span> </div> <div style="height:42px;background:linear-gradient(180deg,#4a5058 0%,#1a1e22 100%);border-radius:2px;border:1px solid #0a0c10;position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,0.5)"><span style="position:absolute;top:55%;left:2px;right:2px;height:6px;background:linear-gradient(180deg,#e8c060,#8a6a20);border:1px solid #3a2810;border-radius:1px"></span></div> <div style="display:flex;gap:1px;height:3px;padding:0 2px"><span style="flex:1;background:#40a060"></span><span style="flex:1;background:#40a060"></span><span style="flex:1;background:#c4a04a"></span><span style="flex:1;background:#2a3038"></span><span style="flex:1;background:#2a3038"></span><span style="flex:1;background:#2a3038"></span></div> </div> </div> <div style="box-sizing:border-box;position:relative;height:14px;background:linear-gradient(180deg,#1a1e22,#0a0c10);border-radius:2px;border:1px solid #000;margin-bottom:7px;box-shadow:inset 0 2px 3px rgba(0,0,0,0.7)"> <span style="position:absolute;top:50%;left:8%;right:8%;height:1px;background:linear-gradient(90deg,#3a8a5a,#c4a04a 50%,#3a8a5a);transform:translateY(-50%);opacity:0.45"></span> <span style="position:absolute;top:-3px;bottom:-3px;left:48%;width:18px;background:linear-gradient(180deg,#8a9aa8,#3a4552);border:1px solid #1a1e22;border-radius:2px;transform:translateX(-50%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 2px 3px rgba(0,0,0,0.5)"><span style="position:absolute;top:50%;left:2px;right:2px;height:1px;background:#1a1e22;transform:translateY(-50%)"></span></span> <span style="position:absolute;bottom:-12px;left:0;font-size:5px;color:rgba(200,216,232,0.45);letter-spacing:0.1em;font-weight:700">A</span> <span style="position:absolute;bottom:-12px;right:0;font-size:5px;color:rgba(200,216,232,0.45);letter-spacing:0.1em;font-weight:700">B</span> </div> <div style="display:flex;gap:4px;justify-content:center;margin-top:6px"> <span style="padding:4px 9px;font-size:7px;font-weight:700;background:linear-gradient(180deg,#c42828,#6a1010);color:white;border-radius:2px;border:1px solid #4a0808;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);letter-spacing:0.08em">KILL</span> <span style="padding:4px 9px;font-size:7px;font-weight:700;background:linear-gradient(180deg,#40a060,#186830);color:white;border-radius:2px;border:1px solid #0a3818;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);letter-spacing:0.08em">CUE</span> <span style="padding:4px 9px;font-size:7px;font-weight:700;background:linear-gradient(180deg,#e8c060,#8a6a20);color:#1a1208;border-radius:2px;border:1px solid #3a2810;box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);letter-spacing:0.08em">FX</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">CH A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">deck left / gain</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">CUE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">CUE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">KILL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">CUE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">KILL</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">CH B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">deck right / gain</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">CUE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">CUE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">KILL</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">CUE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">KILL</span> </div> </div> </div> </div>

A softer choice if you want a little more finish without going ornate.

26. Disc Index

PATH

D:\\MUSIC\\LIBRARY\\Lyrics go here....

D:\ - [AT_TRAIN_01]ISO-9660 + Joliet

D:\MUSIC\LIBRARY\FREE 18,432 KB

[DIR] folder_a<DIR>

[DIR] folder_b<DIR>

[FIL] song_title_01.mp34,812 KB

[FIL] song_title_02.mp34,128 KB

CRC32 - 8A4F2C1E 8 FILES - 2 DIRS

[DIR] folder [FIL] file C:\> _

ROOT DIR

D:\ top level

RIP

01

folder_a (DIR)

Lyrics go here.

3:24 RIP

02

folder_b (DIR)

Lyrics go here.

2:58 RIP

03

song_title_01.mp3

Lyrics go here.

4:01 RIP

04

song_title_02.mp3

Lyrics go here.

3:12 RIP

SUBFOLDER

nested path

RIP

01

notes_readme.txt

Lyrics go here.

3:24 RIP

02

session.log

Lyrics go here.

2:58 RIP

03

folder_backup (DIR)

Lyrics go here.

4:01 RIP

04

playlist.m3u

Lyrics go here.

3:12 RIP

Batch 03

A more indexed layout with catalogue-like signposting and a neat, labelled feel.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:linear-gradient(180deg,#faf9f6 0%,#ffffff 48%);border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 4px 20px rgba(18,28,38,0.12),0 1px 4px rgba(18,28,38,0.06);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:20px 22px 24px"> <div style="box-sizing:border-box;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box;margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:#3d4f5e;font-weight:700">DATA CD / ISO TREE</div> <h2 style="box-sizing:border-box;margin:0 0 8px;font:700 22px/1.25 Georgia, serif;color:#1a2633">Disc Index</h2> <p style="box-sizing:border-box;margin:0;font-size:13px;line-height:1.5;color:#3d4f5e">Joliet names truncate. Never trust the free space readout on the burn summary.</p> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:14px 16px;min-height:52px;border-radius:4px;background:#d8dce0;border:1px solid #b8bcc0;border-left:3px solid #c4a04a"> <div style="box-sizing:border-box;margin-bottom:6px;font-size:9px;font-weight:700;letter-spacing:0.06em;color:#3d4f5e;text-transform:uppercase;font-family:'Courier New',monospace">PATH</div> <div style="box-sizing:border-box;font:13px/1.5 'Courier New',monospace;color:#1a2633">D:\\MUSIC\\LIBRARY\\Lyrics go here....</div> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:0;background:#e4e8ec;border:1px solid #9aa3ae;font-family:'Courier New',monospace;font-size:10px;color:#1a2633;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.8),0 1px 0 rgba(0,0,0,0.06)"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;padding:4px 9px;background:linear-gradient(180deg,#d0d8e0,#b8c0c8);border-bottom:1px solid #8a929a"><span style="display:flex;align-items:center;gap:5px"><span style="width:9px;height:9px;background:linear-gradient(135deg,#8a929a,#4a5058);border:1px solid #3a4048;position:relative;border-radius:1px"><span style="position:absolute;top:1px;right:1px;width:3px;height:3px;background:#c4a04a;border-radius:1px"></span></span><span style="font-size:8px;font-weight:700;letter-spacing:0.04em;color:#2a3040">D:\ - [AT_TRAIN_01]</span></span><span style="font-size:7px;color:#3d4f5e;letter-spacing:0.04em">ISO-9660 + Joliet</span></div> <div style="padding:8px 10px 9px"> <div style="display:flex;justify-content:space-between;font-size:8px;color:#3d4f5e;margin-bottom:4px;letter-spacing:0.04em"><span style="color:#3d4f5e;font-weight:700">D:\MUSIC\LIBRARY\</span><span style="color:#8a929a">FREE 18,432 KB</span></div> <div style="padding:2px 0 2px 6px;border-left:3px solid #c4a04a;display:flex;justify-content:space-between;align-items:baseline"><span><span style="color:#4a7fa8;font-weight:700">[DIR]</span> folder_a</span><span style="font-size:8px;color:#8a929a"><DIR></span></div> <div style="padding:2px 0 2px 14px;display:flex;justify-content:space-between;align-items:baseline"><span><span style="color:#4a7fa8;font-weight:700">[DIR]</span> folder_b</span><span style="font-size:8px;color:#8a929a"><DIR></span></div> <div style="padding:2px 0 2px 14px;display:flex;justify-content:space-between;align-items:baseline"><span><span style="color:#c4a04a;font-weight:700">[FIL]</span> song_title_01.mp3</span><span style="font-size:8px;color:#8a929a">4,812 KB</span></div> <div style="padding:2px 0 2px 14px;display:flex;justify-content:space-between;align-items:baseline"><span><span style="color:#c4a04a;font-weight:700">[FIL]</span> song_title_02.mp3</span><span style="font-size:8px;color:#8a929a">4,128 KB</span></div> <div style="margin-top:5px;padding-top:5px;border-top:1px dashed rgba(58,76,94,0.3);display:flex;justify-content:space-between;font-size:7px;color:#5a6878;letter-spacing:0.06em"> <span>CRC32 - 8A4F2C1E</span> <span>8 FILES - 2 DIRS</span> </div> <div style="margin-top:3px;display:flex;gap:6px;font-size:7px;color:#8a929a;letter-spacing:0.08em"> <span><span style="color:#4a7fa8;font-weight:700">[DIR]</span> folder</span> <span><span style="color:#c4a04a;font-weight:700">[FIL]</span> file</span> <span style="margin-left:auto">C:\> _</span> </div> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">ROOT DIR</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">D:\ top level</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">RIP</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">folder_a (DIR)</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RIP</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">folder_b (DIR)</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RIP</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">song_title_01.mp3</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RIP</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">song_title_02.mp3</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RIP</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">SUBFOLDER</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">nested path</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">RIP</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">notes_readme.txt</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RIP</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">session.log</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RIP</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">folder_backup (DIR)</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RIP</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">playlist.m3u</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">RIP</span> </div> </div> </div> </div>

Works well when you want the layout to feel more filed and labelled.

27. Console Memory

SCENE

Lyrics go here.

SAVE DATA SRAM 8 KB

SLOT 0103B

 

SLOT 02?

 

SLOT 03-

 

SAVE BLOCK A - OVERWRITE?

OST - TR 01 - "Song title 01"

O CANCELHEX CONFIRMUP VIEW

STAGE 01

save slot A

SAVE

01

Song title 01

Lyrics go here.

3:24 SAVE

02

Song title 02

Lyrics go here.

2:58 LOAD

03

Song title 03

Lyrics go here.

4:01 SAVE

04

Song title 04

Lyrics go here.

3:12 LOAD

STAGE 02

save slot B

SAVE

01

Song title 05

Lyrics go here.

3:24 SAVE

02

Song title 06

Lyrics go here.

2:58 LOAD

03

Song title 07

Lyrics go here.

4:01 SAVE

04

Song title 08

Lyrics go here.

3:12 LOAD

Batch 03

A console-style layout with strong blocks and a more archival, saved-state look.

Copy the HTML below and paste it into Dreamwidth in HTML mode.

<div style="box-sizing:border-box;background:linear-gradient(180deg,#faf9f6 0%,#ffffff 48%);border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 4px 20px rgba(18,28,38,0.12),0 1px 4px rgba(18,28,38,0.06);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:20px 22px 24px"> <div style="box-sizing:border-box;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box;margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:#3d4f5e;font-weight:700">GAME OST / SAVE UI</div> <h2 style="box-sizing:border-box;margin:0 0 8px;font:700 22px/1.25 Georgia, serif;color:#1a2633">Console Memory</h2> <p style="box-sizing:border-box;margin:0;font-size:13px;line-height:1.5;color:#3d4f5e">Memory card pins bent. Autosave lies until the fan spins down.</p> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:14px 16px;min-height:52px;border-radius:4px;background:#2a2438;border:1px solid #1a1828;box-shadow:inset 0 2px 6px rgba(0,0,0,0.35)"> <div style="box-sizing:border-box;margin-bottom:6px;font-size:9px;font-weight:700;letter-spacing:0.06em;color:#e8a020;text-transform:uppercase">SCENE</div> <div style="box-sizing:border-box;font:italic 15px/1.55 Georgia, serif;color:#e8e4f0">Lyrics go here.</div> </div> <div style="box-sizing:border-box;margin:0 0 18px;padding:12px 14px 13px;background:linear-gradient(180deg,#342a4a 0%,#1a1428 100%);border:2px solid #1a1828;border-radius:8px;box-shadow:inset 0 2px 8px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.04)"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(168,160,192,0.18)"> <span style="display:flex;align-items:center;gap:5px"><span style="width:10px;height:10px;background:linear-gradient(135deg,#8a7ac8,#4a3e78);border:1px solid #0a0818;border-radius:1px;position:relative"><span style="position:absolute;bottom:-2px;left:1px;right:1px;height:2px;background:#1a1428;border-radius:0 0 1px 1px"></span><span style="position:absolute;bottom:-2px;left:2px;width:1px;height:2px;background:#c4a04a"></span><span style="position:absolute;bottom:-2px;left:4px;width:1px;height:2px;background:#c4a04a"></span><span style="position:absolute;bottom:-2px;left:6px;width:1px;height:2px;background:#c4a04a"></span></span><span style="font-size:9px;font-weight:700;color:#e8a020;letter-spacing:0.12em;text-shadow:0 0 3px rgba(232,160,32,0.4)">SAVE DATA</span></span> <span style="font-size:7px;color:rgba(168,160,192,0.55);font-family:'Courier New',monospace;letter-spacing:0.06em">SRAM 8 KB</span> </div> <div style="display:flex;gap:6px;margin-bottom:8px;justify-content:center"> <div style="flex:1;padding:5px 6px;background:linear-gradient(180deg,#3a3050,#1e1a30);border:1px solid #e8a020;border-radius:3px;position:relative;box-shadow:0 0 5px rgba(232,160,32,0.25)"><div style="display:flex;justify-content:space-between;font-size:6px;color:rgba(232,160,32,0.7);letter-spacing:0.1em;font-weight:700;margin-bottom:2px"><span>SLOT 01</span><span>03B</span></div><div style="display:flex;gap:1px"><span style="flex:1;height:2px;background:#e8a020"></span><span style="flex:1;height:2px;background:#e8a020"></span><span style="flex:1;height:2px;background:#e8a020"></span><span style="flex:1;height:2px;background:rgba(232,160,32,0.2)"></span></div></div> <div style="flex:1;padding:5px 6px;background:linear-gradient(180deg,#3a3050,#1e1a30);border:1px solid #6a6878;border-radius:3px;position:relative"><div style="display:flex;justify-content:space-between;font-size:6px;color:rgba(168,160,192,0.55);letter-spacing:0.1em;font-weight:700;margin-bottom:2px"><span>SLOT 02</span><span style="color:#c42828">?</span></div><div style="display:flex;gap:1px"><span style="flex:1;height:2px;background:repeating-linear-gradient(45deg,#c42828 0px,#c42828 2px,#3a3050 2px,#3a3050 4px)"></span><span style="flex:1;height:2px;background:repeating-linear-gradient(45deg,#c42828 0px,#c42828 2px,#3a3050 2px,#3a3050 4px)"></span><span style="flex:1;height:2px;background:#3a3050"></span><span style="flex:1;height:2px;background:#3a3050"></span></div></div> <div style="flex:1;padding:5px 6px;background:linear-gradient(180deg,#2a2440,#18142a);border:1px solid rgba(106,104,120,0.5);border-radius:3px;position:relative"><div style="display:flex;justify-content:space-between;font-size:6px;color:rgba(168,160,192,0.4);letter-spacing:0.1em;font-weight:700;margin-bottom:2px"><span>SLOT 03</span><span style="color:rgba(168,160,192,0.35)">-</span></div><div style="display:flex;gap:1px"><span style="flex:1;height:2px;background:rgba(168,160,192,0.15)"></span><span style="flex:1;height:2px;background:rgba(168,160,192,0.15)"></span><span style="flex:1;height:2px;background:rgba(168,160,192,0.15)"></span><span style="flex:1;height:2px;background:rgba(168,160,192,0.15)"></span></div></div> </div> <div style="text-align:center;font-size:9px;color:#e8a020;font-weight:700;margin-bottom:3px;letter-spacing:0.08em;text-shadow:0 0 3px rgba(232,160,32,0.3)">SAVE BLOCK A - OVERWRITE?</div> <div style="text-align:center;font-size:7px;color:rgba(168,160,192,0.6);letter-spacing:0.1em;font-family:'Courier New',monospace;margin-bottom:6px">OST - TR 01 - "Song title 01"</div> <div style="display:flex;justify-content:center;gap:10px;font-size:6px;color:rgba(168,160,192,0.5);letter-spacing:0.14em;font-family:'Courier New',monospace;padding-top:5px;border-top:1px solid rgba(168,160,192,0.15)"> <span>O CANCEL</span><span style="color:#e8a020">HEX CONFIRM</span><span>UP VIEW</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#4a7fa8"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">STAGE 01</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">save slot A</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">SAVE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 01</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SAVE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 02</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 03</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SAVE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 04</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> </div> <div style="box-sizing:border-box;margin:0 0 12px;padding:12px 14px;background:#f9fbfc;border-left:2px solid rgba(58, 76, 92, 0.12);border-left-color:#c4a04a"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(58, 76, 92, 0.12)"> <div style="box-sizing:border-box"> <div style="box-sizing:border-box;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#1a2633;margin-bottom:2px">STAGE 02</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">save slot B</div> </div> <span style="box-sizing:border-box;padding:4px 8px;font-size:9px;font-weight:700;text-transform:uppercase;background:#eef2f5;border:1px solid rgba(58, 76, 92, 0.12);color:#3d4f5e">SAVE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">01</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 05</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:24</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SAVE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">02</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 06</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">2:58</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">03</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 07</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">4:01</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">SAVE</span> </div> <div style="box-sizing:border-box;display:grid;grid-template-columns:minmax(36px, max-content) minmax(0, 1fr) auto auto;column-gap:10px;align-items:baseline;padding:6px 0;border-bottom:none"> <span style="box-sizing:border-box;grid-column:1;grid-row:1;font:600 11px 'Courier New', monospace;color:#3d4f5e;min-width:32px">04</span> <div style="box-sizing:border-box;grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0"> <span style="box-sizing:border-box;font-size:13px;color:#1a2633;line-height:1.35">Song title 08</span> <div style="box-sizing:border-box;margin:0;padding:0;font-size:11px;font-style:italic;line-height:1.45;color:#3d4f5e">Lyrics go here.</div> </div> <span style="box-sizing:border-box;grid-column:3;grid-row:1;font:11px 'Courier New', monospace;color:#3d4f5e;justify-self:end">3:12</span> <span style="box-sizing:border-box;grid-column:4;grid-row:1;padding:2px 6px;font-size:8px;font-weight:700;text-transform:uppercase;background:#1a2633;color:white;border-radius:2px;justify-self:end">LOAD</span> </div> </div> </div> </div>

A useful option if you want something more blocky and archive-adjacent.