SIGNAL STATIC: playlist codes, batch 2-1

[gelateria]

Playlist layouts - batch 02-01

Continuing on in the Diadem inspired retro-futuristic theme. Batch 02 stays close to stacked players, portable controls and front-panel displays.

The common thread is brighter hardware detail: brushed metal, LEDs, smoked glass and cleaner screen elements.

The live preview comes first, with the copyable HTML directly underneath each layout. This post was apparently too long to post all 10, so I'll be posting the remaining code as an addendum.

11. Midnight Stack

11

Midnight Stack

WHIPSTACK.WSZ_[]x

128kbps - 44kHzPLAY 02:47STEREO

 

601703106001k3k6k12k14k16k

REW PLAY STOP FF EQ PL

PL A

playlist / main stack

PL

01

song_title_01.mp3

Lyrics go here.

3:24 RUN

02

song_title_02.mp3

Lyrics go here.

2:58 RUN

03

song_title_03.mp3

Lyrics go here.

4:01 RUN

04

song_title_04.mp3

Lyrics go here.

3:12 RUN

PL B

late queue / skins

PL

01

song_title_05.mp3

Lyrics go here.

3:24 RUN

02

song_title_06.mp3

Lyrics go here.

2:58 RUN

03

song_title_07.mp3

Lyrics go here.

4:01 RUN

04

song_title_08.mp3

Lyrics go here.

3:12 RUN

Batch 02

A darker stacked-player layout with cooler tones and a steadier, after-hours feel.

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

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:0 0 12px;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.12em;color:#3d4f5e;font-weight:700">11</div> <h2 style="box-sizing:border-box;margin:0;font:600 20px/1.2 Georgia, serif;color:#1a2633">Midnight Stack</h2> </div> <div style="box-sizing:border-box;margin:0 0 14px;padding:0;background:#121418;border:1px solid #0a0c10;box-shadow:inset 0 0 0 1px rgba(136,200,50,0.06)"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:linear-gradient(180deg,#2a3038 0%,#1a1e24 100%);border-bottom:1px solid #000"><span style="font-size:8px;font-weight:700;color:#88c832;letter-spacing:0.08em;font-family:'Courier New',monospace">WHIPSTACK.WSZ</span><span style="display:flex;gap:3px;align-items:center"><span style="width:10px;height:9px;border:1px solid #3a4048;background:#1a1e24;font-size:7px;line-height:7px;text-align:center;color:#88c832;font-family:'Courier New',monospace">_</span><span style="width:10px;height:9px;border:1px solid #3a4048;background:#1a1e24;font-size:7px;line-height:7px;text-align:center;color:#88c832;font-family:'Courier New',monospace">[]</span><span style="width:10px;height:9px;border:1px solid #3a4048;background:#1a1e24;font-size:7px;line-height:7px;text-align:center;color:#c42828;font-family:'Courier New',monospace">x</span></span></div> <div style="padding:8px 10px 10px"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding:3px 6px;background:#0a0c10;border:1px solid #2a3038"><span style="font-size:9px;color:#88c832;font-family:'Courier New',monospace;font-weight:700;letter-spacing:0.06em">128kbps - 44kHz</span><span style="font-size:8px;color:#c4a04a;font-family:'Courier New',monospace">PLAY 02:47</span><span style="font-size:8px;color:#88c832;font-family:'Courier New',monospace">STEREO</span></div> <div style="box-sizing:border-box;display:flex;gap:3px;height:32px;align-items:flex-end;margin-bottom:3px;padding:0 2px"> <span style="flex:1;background:linear-gradient(180deg,#e8d85c 0%,#88c832 50%,#5a9020 100%);height:45%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,216,92,0.4)"></span><span style="flex:1;background:linear-gradient(180deg,#e8d85c 0%,#88c832 50%,#5a9020 100%);height:78%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,216,92,0.4)"></span><span style="flex:1;background:linear-gradient(180deg,#e8d85c 0%,#88c832 50%,#5a9020 100%);height:32%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,216,92,0.4)"></span><span style="flex:1;background:linear-gradient(180deg,#c42828 0%,#e8844a 30%,#88c832 70%);height:92%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,100,72,0.4)"></span><span style="flex:1;background:linear-gradient(180deg,#e8d85c 0%,#88c832 50%,#5a9020 100%);height:55%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,216,92,0.4)"></span><span style="flex:1;background:linear-gradient(180deg,#e8d85c 0%,#88c832 50%,#5a9020 100%);height:68%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,216,92,0.4)"></span><span style="flex:1;background:linear-gradient(180deg,#e8d85c 0%,#88c832 50%,#5a9020 100%);height:40%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,216,92,0.4)"></span><span style="flex:1;background:linear-gradient(180deg,#c42828 0%,#e8844a 30%,#88c832 70%);height:86%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,100,72,0.4)"></span><span style="flex:1;background:linear-gradient(180deg,#e8d85c 0%,#88c832 50%,#5a9020 100%);height:50%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,216,92,0.4)"></span><span style="flex:1;background:linear-gradient(180deg,#e8d85c 0%,#88c832 50%,#5a9020 100%);height:72%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,216,92,0.4)"></span><span style="flex:1;background:linear-gradient(180deg,#e8d85c 0%,#88c832 50%,#5a9020 100%);height:38%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,216,92,0.4)"></span><span style="flex:1;background:linear-gradient(180deg,#e8d85c 0%,#88c832 50%,#5a9020 100%);height:88%;min-height:7px;border-radius:1px 1px 0 0;border:1px solid #3a6020;box-shadow:inset 0 1px 0 rgba(232,216,92,0.4)"></span> </div> <div style="display:flex;justify-content:space-between;font-size:6px;color:rgba(136,200,50,0.5);font-family:'Courier New',monospace;letter-spacing:0.08em;margin-bottom:8px;padding:0 2px"><span>60</span><span>170</span><span>310</span><span>600</span><span>1k</span><span>3k</span><span>6k</span><span>12k</span><span>14k</span><span>16k</span></div> <div style="box-sizing:border-box;display:flex;gap:3px"> <span style="flex:1;padding:4px 0;text-align:center;font-size:8px;font-weight:700;background:linear-gradient(180deg,#2a3038,#1a1e24);color:#88c832;border:1px solid #3a4048;border-radius:1px">REW</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:8px;font-weight:700;background:linear-gradient(180deg,#a8e850,#5a9020);color:#0a0c10;border:1px solid #3a6020;border-radius:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2)">PLAY</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:8px;font-weight:700;background:linear-gradient(180deg,#2a3038,#1a1e24);color:#88c832;border:1px solid #3a4048;border-radius:1px">STOP</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:8px;font-weight:700;background:linear-gradient(180deg,#2a3038,#1a1e24);color:#88c832;border:1px solid #3a4048;border-radius:1px">FF</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#2a3038,#1a1e24);color:#c4a04a;border:1px solid #3a4048;border-radius:1px;letter-spacing:0.06em">EQ</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#2a3038,#1a1e24);color:#c4a04a;border:1px solid #3a4048;border-radius:1px;letter-spacing:0.06em">PL</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">PL A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">playlist / main stack</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">PL</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.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: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">RUN</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.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">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">RUN</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.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">RUN</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.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">RUN</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">PL B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">late queue / skins</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">PL</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.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: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">RUN</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.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">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">RUN</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.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">RUN</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.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">RUN</span> </div> </div> </div> </div>

A good choice if you want something darker without losing clarity.

12. Diamond Flash

12

Diamond Flash

* DIAMOND FLASH

WRT

QUEUE - 004/128128k - 44k

song_004.MP3

CF-64MBFAT16RO

MENU PLAY A-B <->USB

Bank A

flash / 32MB

MENU

01

song_001.MP3

Lyrics go here.

3:24 GO

02

song_002.MP3

Lyrics go here.

2:58 GO

03

song_003.MP3

Lyrics go here.

4:01 GO

04

song_004.MP3

Lyrics go here.

3:12 GO

Bank B

overflow / parallel

MENU

01

song_005.MP3

Lyrics go here.

3:24 GO

02

song_006.MP3

Lyrics go here.

2:58 GO

03

song_007.MP3

Lyrics go here.

4:01 GO

04

song_008.MP3

Lyrics go here.

3:12 GO

Batch 02

A bright chrome-and-light layout with sharper edges and a more polished finish.

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

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:0 0 12px;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.12em;color:#3d4f5e;font-weight:700">12</div> <h2 style="box-sizing:border-box;margin:0;font:600 20px/1.2 Georgia, serif;color:#1a2633">Diamond Flash</h2> </div> <div style="box-sizing:border-box;margin:0 0 14px;padding:12px 14px 14px;background:linear-gradient(155deg,#1a1e24 0%,#242932 60%,#1a1e24 100%);border:2px solid #4a7fa8;border-radius:8px;box-shadow:inset 0 1px 0 rgba(74,159,212,0.25),0 0 12px rgba(74,159,212,0.08);position:relative"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px"> <div style="display:flex;align-items:center;gap:6px"> <span style="width:16px;height:16px;border:1px solid #4a9fd4;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#4a9fd4;background:radial-gradient(circle at 35% 30%,rgba(136,200,232,0.3),rgba(74,159,212,0))">*</span> <span style="font-size:8px;font-weight:700;color:#88c8e8;letter-spacing:0.1em">DIAMOND FLASH</span> </div> <span style="display:flex;align-items:center;gap:3px"><span style="width:5px;height:5px;background:#e84a4a;border-radius:50%;box-shadow:0 0 3px rgba(232,74,74,0.8)"></span><span style="font-size:7px;color:rgba(232,74,74,0.75);font-family:'Courier New',monospace">WRT</span></span> </div> <div style="box-sizing:border-box;background:#0a0c10;padding:7px 9px;font-family:'Courier New',monospace;border-radius:3px;margin-bottom:8px;border:1px solid #2a3038;box-shadow:inset 0 2px 4px rgba(0,0,0,0.5)"> <div style="display:flex;justify-content:space-between;font-size:8px;color:#4a9fd4;margin-bottom:2px;letter-spacing:0.06em"><span>QUEUE - 004/128</span><span style="color:rgba(136,200,50,0.6)">128k - 44k</span></div> <div style="font-size:10px;color:#88c832;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 0 4px rgba(136,200,50,0.4)">song_004.MP3</div> <div style="display:flex;justify-content:space-between;font-size:7px;color:rgba(74,159,212,0.5);margin-top:2px"><span>CF-64MB</span><span>FAT16</span><span>RO</span></div> </div> <div style="box-sizing:border-box;display:flex;gap:4px;justify-content:space-between;align-items:center"> <span style="display:inline-block;width:16px;height:10px;background:linear-gradient(180deg,#3a4552,#1a1e24);border:1px solid #0a0c10;border-radius:1px;position:relative"><span style="position:absolute;top:1px;left:1px;right:1px;height:1px;background:#4a7fa8"></span><span style="position:absolute;bottom:1px;left:1px;right:1px;height:1px;background:#4a7fa8"></span><span style="position:absolute;bottom:0;right:-2px;width:0;height:0;border-left:3px solid transparent;border-top:5px solid #1a1e24"></span></span> <span style="padding:4px 8px;font-size:7px;font-weight:700;text-transform:uppercase;background:#2a3440;color:white;border:1px solid #3a4552;border-radius:2px;letter-spacing:0.06em">MENU</span> <span style="padding:4px 12px;font-size:8px;font-weight:700;text-transform:uppercase;background:linear-gradient(180deg,#6dbdf2,#2a6aa0);color:white;border:1px solid #1a4a78;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2)">PLAY</span> <span style="padding:4px 8px;font-size:7px;font-weight:700;text-transform:uppercase;background:#2a3440;color:white;border:1px solid #3a4552;border-radius:2px;letter-spacing:0.06em">A-B</span> <span style="font-size:7px;color:rgba(136,200,232,0.55);font-family:'Courier New',monospace;display:flex;align-items:center;gap:2px"><-><span style="letter-spacing:0.08em">USB</span></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">Bank A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">flash / 32MB</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">MENU</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_001.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: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">GO</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_002.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">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">GO</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_003.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">GO</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_004.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">GO</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">Bank B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">overflow / parallel</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">MENU</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_005.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: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">GO</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_006.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">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">GO</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_007.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">GO</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_008.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">GO</span> </div> </div> </div> </div>

Useful when you want something brighter and more polished on the page.

13. Timecode Deck

13

Timecode Deck

DAT - PRO - 48kHz

01:23:45:12 TCERR 00

-40-20-10-30

 

 

REW STOP PAUSE PLAY REC

XLR - BAL - +4dBuSMPTE LTC

Reel A

timecode / forward

REC

01

Song title 01

Lyrics go here.

3:24 REC

02

Song title 02

Lyrics go here.

2:58 PAUSE

03

Song title 03

Lyrics go here.

4:01 REC

04

Song title 04

Lyrics go here.

3:12 PAUSE

Reel B

return / error log

REC

01

Song title 05

Lyrics go here.

3:24 REC

02

Song title 06

Lyrics go here.

2:58 PAUSE

03

Song title 07

Lyrics go here.

4:01 REC

04

Song title 08

Lyrics go here.

3:12 PAUSE

Batch 02

A deck-led layout with strong dividers and a more technical front-panel structure.

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

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:0 0 12px;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.12em;color:#3d4f5e;font-weight:700">13</div> <h2 style="box-sizing:border-box;margin:0;font:600 20px/1.2 Georgia, serif;color:#1a2633">Timecode Deck</h2> </div> <div style="box-sizing:border-box;margin:0 0 14px;padding:11px 14px 12px;background:linear-gradient(180deg,#2e3338 0%,#1e2226 100%);border:1px solid #0a0c10;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),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;font-weight:700;letter-spacing:0.1em;color:rgba(200,224,64,0.4);font-family:'Courier New',monospace">DAT - PRO - 48kHz</span><span style="display:flex;gap:4px;align-items:center"><span style="width:4px;height:4px;background:#c8e040;border-radius:50%;box-shadow:0 0 2px #c8e040"></span><span style="width:4px;height:4px;background:#c84030;border-radius:50%"></span></span></div> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;padding:4px 7px;background:#0a0c10;border:1px solid #000;border-radius:2px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.6)"> <span style="font-family:'Courier New',monospace;font-size:11px;color:#c8e040;font-weight:700;letter-spacing:0.1em;text-shadow:0 0 4px rgba(200,224,64,0.5)">01:23:45:12</span> <span style="display:flex;gap:4px;align-items:center"><span style="font-size:6px;color:rgba(200,224,64,0.55);font-family:'Courier New',monospace">TC</span><span style="font-size:9px;color:#c84030;font-family:'Courier New',monospace;font-weight:700">ERR 00</span></span> </div> <div style="box-sizing:border-box;display:flex;gap:6px;margin-bottom:7px;align-items:center"> <span style="width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#3a3a3a 0%,#0a0c10 40%,#1a1e22 41%,#1a1e22 100%);border:1px solid #0a0c10;box-shadow:inset 0 1px 2px rgba(0,0,0,0.8),0 0 0 1px #3a4048;position:relative;flex-shrink:0"><span style="position:absolute;top:50%;left:50%;width:1px;height:6px;background:#60c040;transform:translate(-50%,-50%) rotate(45deg)"></span></span> <div style="flex:1;display:flex;flex-direction:column;gap:2px"> <div style="display:flex;justify-content:space-between;font-size:6px;color:rgba(200,224,64,0.4);font-family:'Courier New',monospace;letter-spacing:0.1em"><span>-40</span><span>-20</span><span>-10</span><span>-3</span><span>0</span></div> <div style="display:flex;gap:2px;height:5px;align-items:center"><span style="flex:1;height:100%;background:#2a4020;border-radius:0"></span><span style="flex:1;height:100%;background:#60c040"></span><span style="flex:1;height:100%;background:#60c040"></span><span style="flex:1;height:100%;background:#c8c040"></span><span style="flex:1;height:100%;background:#c8c040"></span><span style="flex:1;height:100%;background:#c84030"></span><span style="flex:1;height:100%;background:#2a2a2a"></span><span style="flex:1;height:100%;background:#2a2a2a"></span></div> <div style="display:flex;gap:2px;height:5px;align-items:center"><span style="flex:1;height:100%;background:#2a4020"></span><span style="flex:1;height:100%;background:#60c040"></span><span style="flex:1;height:100%;background:#60c040"></span><span style="flex:1;height:100%;background:#60c040"></span><span style="flex:1;height:100%;background:#c8c040"></span><span style="flex:1;height:100%;background:#2a2a2a"></span><span style="flex:1;height:100%;background:#2a2a2a"></span><span style="flex:1;height:100%;background:#2a2a2a"></span></div> </div> <span style="width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#3a3a3a 0%,#0a0c10 40%,#1a1e22 41%,#1a1e22 100%);border:1px solid #0a0c10;box-shadow:inset 0 1px 2px rgba(0,0,0,0.8),0 0 0 1px #3a4048;position:relative;flex-shrink:0"><span style="position:absolute;top:50%;left:50%;width:1px;height:6px;background:#60c040;transform:translate(-50%,-50%) rotate(-30deg)"></span></span> </div> <div style="box-sizing:border-box;display:flex;gap:3px;margin-bottom:5px"> <span style="flex:1;padding:4px 0;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#3a4552,#1a1e22);color:white;border:1px solid #0a0c10;border-radius:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)">REW</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#3a4552,#1a1e22);color:white;border:1px solid #0a0c10;border-radius:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)">STOP</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#4a5662,#2a3440);color:white;border:1px solid #0a0c10;border-radius:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)">PAUSE</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#3a4552,#1a1e22);color:white;border:1px solid #0a0c10;border-radius:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)">PLAY</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#c84030,#6a1a18);color:white;border:1px solid #3a0a08;border-radius:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 0 4px rgba(200,60,40,0.3)">REC</span> </div> <div style="box-sizing:border-box;display:flex;justify-content:space-between;font-size:6px;color:rgba(200,224,64,0.3);font-family:'Courier New',monospace;letter-spacing:0.1em;padding-top:3px;border-top:1px solid #1a1e22"><span>XLR - BAL - +4dBu</span><span>SMPTE LTC</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">Reel A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">timecode / forward</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">REC</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">REC</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">PAUSE</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">REC</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">PAUSE</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">Reel B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">return / error log</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">REC</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">REC</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">PAUSE</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">REC</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">PAUSE</span> </div> </div> </div> </div>

Works well for playlists that need a little more visible structure.

14. LED Panel

14

LED Panel

CONCOURSE-500DOLBY B

 

TDK SA-90

 

DEAD SIDE

||||||||.. VU

FM AM TAPE PLAY AUX *

Speaker A

grille / warm stack

FM

01

Song title 01

Lyrics go here.

3:24 CUE

02

Song title 02

Lyrics go here.

2:58 CUE

03

Song title 03

Lyrics go here.

4:01 CUE

04

Song title 04

Lyrics go here.

3:12 CUE

Speaker B

return / gold LED

FM

01

Song title 05

Lyrics go here.

3:24 CUE

02

Song title 06

Lyrics go here.

2:58 CUE

03

Song title 07

Lyrics go here.

4:01 CUE

04

Song title 08

Lyrics go here.

3:12 CUE

Batch 02

An LED-style layout with bright markers and a compact, display-first look.

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

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:0 0 12px;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.12em;color:#3d4f5e;font-weight:700">14</div> <h2 style="box-sizing:border-box;margin:0;font:600 20px/1.2 Georgia, serif;color:#1a2633">LED Panel</h2> </div> <div style="box-sizing:border-box;margin:0 0 14px;padding:8px 12px 12px;background:linear-gradient(180deg,#4a4050 0%,#2e2a34 100%);border:1px solid #1a1418;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),inset 0 -1px 0 rgba(0,0,0,0.4);position:relative"> <span style="position:absolute;top:-3px;left:32%;right:32%;height:3px;background:linear-gradient(180deg,#2a2028,#1a1418);border-radius:4px 4px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)"></span> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin:4px 0 8px;padding:0 2px"><span style="font-size:7px;font-weight:700;letter-spacing:0.12em;color:rgba(232,224,240,0.55)">CONCOURSE-500</span><span style="display:flex;gap:3px;align-items:center"><span style="font-size:6px;color:rgba(200,224,64,0.6);font-family:'Courier New',monospace;letter-spacing:0.1em">DOLBY B</span><span style="width:4px;height:4px;background:#c8e040;border-radius:50%;box-shadow:0 0 2px rgba(200,224,64,0.8)"></span></span></div> <div style="box-sizing:border-box;display:flex;gap:8px;margin-bottom:8px"> <div style="flex:1;height:44px;background:linear-gradient(180deg,#1a1014 0%,#2a2028 100%);border:2px solid #1a1418;border-radius:3px;position:relative;box-shadow:inset 0 2px 4px rgba(0,0,0,0.6)"> <div style="position:absolute;inset:4px 6px;background:repeating-linear-gradient(90deg,#2a2028 0px,#2a2028 2px,#4a3848 2px,#4a3848 4px);border-radius:1px"></div> <span style="position:absolute;top:50%;left:22%;width:5px;height:5px;background:#1a1014;border:1px solid #c4a04a;border-radius:50%;transform:translateY(-50%);box-shadow:inset 0 0 0 1px #4a3030"></span> <span style="position:absolute;top:50%;right:22%;width:5px;height:5px;background:#1a1014;border:1px solid #c4a04a;border-radius:50%;transform:translateY(-50%);box-shadow:inset 0 0 0 1px #4a3030"></span> <span style="position:absolute;top:1px;left:6px;right:6px;height:6px;background:linear-gradient(180deg,rgba(232,224,240,0.7),rgba(232,224,240,0.3));border-radius:1px 1px 0 0;font-size:5px;line-height:6px;text-align:center;color:#3a2e30;letter-spacing:0.08em;font-weight:700">TDK SA-90</span> </div> <div style="flex:1;height:44px;background:linear-gradient(180deg,#1a1014 0%,#2a2028 100%);border:2px solid #1a1418;border-radius:3px;position:relative;box-shadow:inset 0 2px 4px rgba(0,0,0,0.6)"> <div style="position:absolute;inset:4px 6px;background:repeating-linear-gradient(90deg,#2a2028 0px,#2a2028 2px,#4a3848 2px,#4a3848 4px);border-radius:1px;opacity:0.5"></div> <span style="position:absolute;top:50%;left:22%;width:5px;height:5px;background:#1a1014;border:1px solid #6a5040;border-radius:50%;transform:translateY(-50%)"></span> <span style="position:absolute;top:50%;right:22%;width:5px;height:5px;background:#1a1014;border:1px solid #6a5040;border-radius:50%;transform:translateY(-50%)"></span> <span style="position:absolute;top:1px;left:6px;right:6px;height:6px;background:linear-gradient(180deg,rgba(168,160,180,0.5),rgba(168,160,180,0.2));border-radius:1px 1px 0 0;font-size:5px;line-height:6px;text-align:center;color:#4a3e40;letter-spacing:0.08em;font-weight:700">DEAD SIDE</span> </div> </div> <div style="box-sizing:border-box;display:flex;align-items:center;gap:6px;margin-bottom:8px;padding:4px 6px;background:#1a1418;border:1px solid #0a0408;border-radius:2px"> <span style="width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6a6070,#2a2028);border:1px solid #0a0408;flex-shrink:0"></span> <div style="flex:1;font-family:'Courier New',monospace;font-size:9px;color:#c8e040;text-align:center;letter-spacing:0.12em;text-shadow:0 0 3px rgba(200,224,64,0.5)"><span style="color:rgba(200,224,64,0.35)">||||</span><span style="color:#c8e040">|||</span><span style="color:rgba(232,132,74,0.4)">|..</span> <span style="font-size:7px;color:rgba(200,224,64,0.5)">VU</span></div> <span style="width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6a6070,#2a2028);border:1px solid #0a0408;flex-shrink:0"></span> </div> <div style="box-sizing:border-box;display:flex;gap:3px;justify-content:center;align-items:center"> <span style="padding:5px 7px;font-size:7px;font-weight:700;background:linear-gradient(180deg,#3a3040,#1a1418);color:#e8e0f0;border-radius:2px;border:1px solid #0a0408;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)">FM</span> <span style="padding:5px 7px;font-size:7px;font-weight:700;background:linear-gradient(180deg,#3a3040,#1a1418);color:#e8e0f0;border-radius:2px;border:1px solid #0a0408;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)">AM</span> <span style="padding:5px 9px;font-size:7px;font-weight:700;background:linear-gradient(180deg,#e8c060,#a87820);color:#1a1418;border-radius:2px;border:1px solid #5a3810;box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0 0 4px rgba(196,160,74,0.4);letter-spacing:0.06em">TAPE PLAY</span> <span style="padding:5px 7px;font-size:7px;font-weight:700;background:linear-gradient(180deg,#3a3040,#1a1418);color:#e8e0f0;border-radius:2px;border:1px solid #0a0408;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)">AUX</span> <span style="padding:5px 7px;font-size:7px;font-weight:700;background:linear-gradient(180deg,#c42828,#6a1a18);color:white;border-radius:2px;border:1px solid #3a0a08;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15)">*</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">Speaker A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">grille / warm stack</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">FM</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">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">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">CUE</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">Speaker B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">return / gold LED</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">FM</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">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">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">CUE</span> </div> </div> </div> </div>

A straightforward option if you want the display details to carry the look.

15. Clickwheel

15

Clickwheel

HOLD

Now Playing

Draft Library - 2004

1:12

 

 

SEL

MENU FF PLAY REW

* 30GB HDD <->FireWire 400

Playlist A

Draft library / 2004 - clickwheel

SYNC

01

Song title 01

Lyrics go here.

3:24 TAP

02

Song title 02

Lyrics go here.

2:58 TAP

03

Song title 03

Lyrics go here.

4:01 TAP

04

Song title 04

Lyrics go here.

3:12 TAP

Playlist B

return / warm bias

SYNC

01

Song title 05

Lyrics go here.

3:24 TAP

02

Song title 06

Lyrics go here.

2:58 TAP

03

Song title 07

Lyrics go here.

4:01 TAP

04

Song title 08

Lyrics go here.

3:12 TAP

Batch 02

A cleaner portable-player layout that keeps the page simple and easy to scan.

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

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:0 0 12px;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.12em;color:#3d4f5e;font-weight:700">15</div> <h2 style="box-sizing:border-box;margin:0;font:600 20px/1.2 Georgia, serif;color:#1a2633">Clickwheel</h2> </div> <div style="box-sizing:border-box;margin:0 0 14px;padding:10px 14px 12px;background:linear-gradient(180deg,#f8fafc 0%,#e4e8ee 55%,#c8cdd5 100%);border:1px solid #b0b8c2;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),inset 0 -1px 0 rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);display:flex;flex-direction:column;align-items:center;position:relative"> <span style="position:absolute;top:4px;right:10px;display:flex;align-items:center;gap:3px"><span style="font-size:6px;color:#5a6068;letter-spacing:0.1em;font-weight:700">HOLD</span><span style="width:14px;height:5px;background:linear-gradient(180deg,#fafafa,#c8ccd4);border:1px solid #8a929a;border-radius:2px;position:relative"><span style="position:absolute;top:-1px;right:0;width:5px;height:7px;background:linear-gradient(180deg,#d8dce4,#9aa3ae);border:1px solid #6a7078;border-radius:1px"></span></span></span> <div style="box-sizing:border-box;width:100%;max-width:172px;padding:6px 8px;background:linear-gradient(180deg,#a8c4e0 0%,#88b0d4 100%);border:1px solid #6a8aa8;border-radius:3px;margin-bottom:10px;display:flex;align-items:center;gap:6px;box-shadow:inset 0 2px 3px rgba(0,0,0,0.15)"> <span style="width:24px;height:24px;background:linear-gradient(135deg,#2a3a4c,#6a8aa8);border:1px solid #1a2633;border-radius:1px;flex-shrink:0;position:relative"><span style="position:absolute;inset:4px;border:1px solid rgba(255,255,255,0.2)"></span></span> <div style="flex:1;min-width:0"> <div style="font-size:9px;font-weight:700;color:#0a1018;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">Now Playing</div> <div style="font-size:7px;color:rgba(10,16,24,0.6);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:1px">Draft Library - 2004</div> <div style="display:flex;justify-content:space-between;align-items:center;margin-top:2px"><span style="display:inline-block;width:36px;height:2px;background:rgba(10,16,24,0.25);border-radius:1px;position:relative"><span style="position:absolute;left:0;top:0;bottom:0;width:30%;background:#0a1018;border-radius:1px"></span></span><span style="font-size:6px;color:rgba(10,16,24,0.5);font-family:'Courier New',monospace">1:12</span></div> </div> <span style="font-size:8px;color:rgba(10,16,24,0.6);display:flex;flex-direction:column;align-items:flex-end;gap:1px"><span style="width:10px;height:5px;border:1px solid #0a1018;border-radius:1px;position:relative"><span style="position:absolute;left:0;top:0;bottom:0;width:70%;background:#0a1018"></span><span style="position:absolute;right:-2px;top:1px;bottom:1px;width:1px;background:#0a1018"></span></span></span> </div> <div style="box-sizing:border-box;position:relative;width:124px;height:124px;border-radius:50%;background:linear-gradient(135deg,#ffffff 0%,#e8eaee 50%,#d0d4dc 100%);border:1px solid #c0c4cc;box-shadow:inset 0 1px 2px rgba(255,255,255,1),inset 0 -2px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.08)"> <div style="position:absolute;inset:5%;border-radius:50%;border:1px solid #b0b4bc;box-shadow:inset 0 1px 1px rgba(255,255,255,0.6)"></div> <div style="position:absolute;inset:23%;border-radius:50%;background:linear-gradient(180deg,#ecedf0,#cdd2da);border:1px solid #a8aeb6;box-shadow:inset 0 1px 1px rgba(255,255,255,0.8),0 1px 0 rgba(0,0,0,0.05)"></div> <div style="position:absolute;inset:39%;border-radius:50%;background:linear-gradient(180deg,#2a3542,#0e1620);border:1px solid #050810;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 1px rgba(255,255,255,0.08),inset 0 -1px 2px rgba(0,0,0,0.5)"> <span style="font-size:7px;font-weight:700;color:rgba(255,255,255,0.8);letter-spacing:0.06em">SEL</span> </div> <span style="position:absolute;top:4%;left:50%;transform:translateX(-50%);font-size:6px;font-weight:700;color:#3a4048;letter-spacing:0.12em">MENU</span> <span style="position:absolute;right:5%;top:50%;transform:translateY(-50%);font-size:7px;font-weight:700;color:#3a4048">FF</span> <span style="position:absolute;bottom:5%;left:50%;transform:translateX(-50%);font-size:7px;font-weight:700;color:#3a4048">PLAY</span> <span style="position:absolute;left:5%;top:50%;transform:translateY(-50%);font-size:7px;font-weight:700;color:#3a4048">REW</span> </div> <div style="box-sizing:border-box;margin-top:8px;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:178px;font-size:7px;color:#5a6068;letter-spacing:0.08em;font-family:'Courier New',monospace"> <span>* 30GB HDD</span> <span style="display:flex;align-items:center;gap:3px"><-><span>FireWire 400</span></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">Playlist A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">Draft library / 2004 - clickwheel</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">SYNC</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">TAP</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">TAP</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">TAP</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">TAP</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">Playlist B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">return / warm bias</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">SYNC</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">TAP</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">TAP</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">TAP</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">TAP</span> </div> </div> </div> </div>

One of the simpler portable layouts if you want a cleaner page.

16. Burn Strip

16

Burn Strip

WRITING - TR 02/0816xDAO

 

72% - 34:12 / 47:28BUF 98%

 

CD-R - 700MB - TYWARN BURN-PROOF ON

* BURN FINALIZE CANCEL

Disc A

burn queue / outbound

BURN

01

Song title 01

Lyrics go here.

3:24 BURN

02

Song title 02

Lyrics go here.

2:58 FINALIZE

03

Song title 03

Lyrics go here.

4:01 BURN

04

Song title 04

Lyrics go here.

3:12 FINALIZE

Disc B

finalize / return

FINALIZE

01

Song title 05

Lyrics go here.

3:24 BURN

02

Song title 06

Lyrics go here.

2:58 FINALIZE

03

Song title 07

Lyrics go here.

4:01 BURN

04

Song title 08

Lyrics go here.

3:12 FINALIZE

Batch 02

A CD-burner style layout with strip labels and a slightly busier, desktop feel.

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

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:0 0 12px;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.12em;color:#3d4f5e;font-weight:700">16</div> <h2 style="box-sizing:border-box;margin:0;font:600 20px/1.2 Georgia, serif;color:#1a2633">Burn Strip</h2> </div> <div style="box-sizing:border-box;margin:0 0 14px;padding:12px 14px;background:linear-gradient(180deg,#303438 0%,#1e2226 100%);border:1px solid #0a0c10;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px"><span style="display:flex;align-items:center;gap:5px"><span style="width:5px;height:5px;background:#e8844a;border-radius:50%;box-shadow:0 0 3px rgba(232,132,74,0.8)"></span><span style="font-size:8px;font-family:'Courier New',monospace;color:#e8844a;font-weight:700;letter-spacing:0.06em">WRITING - TR 02/08</span></span><span style="display:flex;gap:3px;align-items:center"><span style="font-size:6px;color:rgba(232,132,74,0.55);font-family:'Courier New',monospace;letter-spacing:0.06em">16x</span><span style="font-size:6px;color:rgba(232,132,74,0.55);font-family:'Courier New',monospace;letter-spacing:0.06em">DAO</span></span></div> <div style="box-sizing:border-box;height:8px;background:#0a0c10;border:1px solid #000;margin-bottom:4px;border-radius:1px;overflow:hidden;position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,0.6)"> <div style="height:100%;width:72%;background:repeating-linear-gradient(45deg,#e8844a 0px,#e8844a 4px,#c4a04a 4px,#c4a04a 8px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15)"></div> <span style="position:absolute;top:0;bottom:0;left:72%;width:1px;background:rgba(255,255,255,0.4)"></span> </div> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-family:'Courier New',monospace;font-size:8px;color:rgba(232,132,74,0.7)"><span>72% - 34:12 / 47:28</span><span>BUF 98%</span></div> <div style="box-sizing:border-box;display:flex;gap:2px;margin-bottom:7px"> <span style="flex:1;height:3px;background:#5a7828;border-radius:1px"></span> <span style="flex:1;height:3px;background:repeating-linear-gradient(45deg,#e8844a 0px,#e8844a 2px,#c4a04a 2px,#c4a04a 4px);border-radius:1px"></span> <span style="flex:1;height:3px;background:#2a3038;border-radius:1px"></span> <span style="flex:1;height:3px;background:#2a3038;border-radius:1px"></span> <span style="flex:1;height:3px;background:#2a3038;border-radius:1px"></span> <span style="flex:1;height:3px;background:#2a3038;border-radius:1px"></span> <span style="flex:1;height:3px;background:#2a3038;border-radius:1px"></span> <span style="flex:1;height:3px;background:#2a3038;border-radius:1px"></span> </div> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;font-family:'Courier New',monospace;font-size:6px;color:rgba(232,132,74,0.4);letter-spacing:0.1em;margin-bottom:8px"><span>CD-R - 700MB - TY</span><span>WARN BURN-PROOF ON</span></div> <div style="box-sizing:border-box;display:flex;gap:4px"> <span style="flex:1;padding:5px 0;text-align:center;font-size:8px;font-weight:700;background:linear-gradient(180deg,#e8844a,#a85a20);color:#1a0a00;border-radius:2px;border:1px solid #5a2800;box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 0 4px rgba(232,132,74,0.3);letter-spacing:0.06em">* BURN</span> <span style="flex:1;padding:5px 0;text-align:center;font-size:8px;font-weight:700;background:linear-gradient(180deg,#4a5562,#242c36);color:white;border-radius:2px;border:1px solid #0a0c10;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);letter-spacing:0.06em">FINALIZE</span> <span style="padding:5px 8px;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#3a4552,#1a1e22);color:rgba(232,132,74,0.75);border-radius:2px;border:1px solid #0a0c10;letter-spacing:0.08em">CANCEL</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">Disc A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">burn queue / outbound</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">BURN</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">BURN</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">FINALIZE</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">BURN</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">FINALIZE</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">Disc B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">finalize / return</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">FINALIZE</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">BURN</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">FINALIZE</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">BURN</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">FINALIZE</span> </div> </div> </div> </div>

Useful for busier mixes where the labelled sections help the eye move down the page.

17. Gold Bias

17

Gold Bias

session.rm_[]x

 

Buffering 12% 28.8k

BUFFER PLAY STOP REC

REQUIRES G2 - ver 6.0.6.96SureStream TM

Stream A

gold buffer / outbound

BUFFER

01

Song title 01

Lyrics go here.

3:24 BUF

02

Song title 02

Lyrics go here.

2:58 PLAY

03

Song title 03

Lyrics go here.

4:01 BUF

04

Song title 04

Lyrics go here.

3:12 PLAY

Stream B

return / dial tail

BUFFER

01

Song title 05

Lyrics go here.

3:24 BUF

02

Song title 06

Lyrics go here.

2:58 PLAY

03

Song title 07

Lyrics go here.

4:01 BUF

04

Song title 08

Lyrics go here.

3:12 PLAY

Batch 02

A warmer display layout with soft gold accents and a quieter overall finish.

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

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:0 0 12px;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.12em;color:#3d4f5e;font-weight:700">17</div> <h2 style="box-sizing:border-box;margin:0;font:600 20px/1.2 Georgia, serif;color:#1a2633">Gold Bias</h2> </div> <div style="box-sizing:border-box;margin:0 0 14px;padding:0;background:#1a1810;border:1px solid #3a3020;box-shadow:inset 0 0 0 1px rgba(196,160,74,0.08)"> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:linear-gradient(180deg,#2a2418 0%,#1a1410 100%);border-bottom:1px solid #3a3020"><span style="display:flex;align-items:center;gap:5px"><span style="width:8px;height:8px;border:1px solid #c4a04a;border-radius:1px;background:radial-gradient(circle at 40% 30%,#e8d060,#c4a04a);box-shadow:inset 0 0 2px rgba(0,0,0,0.4)"></span><span style="font-size:8px;font-weight:700;color:#c4a04a;letter-spacing:0.08em;font-family:'Courier New',monospace">session.rm</span></span><span style="display:flex;gap:4px;color:rgba(196,160,74,0.55);font-family:'Courier New',monospace;font-size:8px"><span>_</span><span>[]</span><span>x</span></span></div> <div style="padding:10px 12px 11px"> <div style="box-sizing:border-box;display:flex;align-items:center;gap:8px;margin-bottom:7px"> <span style="width:0;border-left:11px solid #c4a04a;border-top:7px solid transparent;border-bottom:7px solid transparent;filter:drop-shadow(0 1px 1px rgba(0,0,0,0.4));flex-shrink:0"></span> <div style="flex:1;height:6px;background:#2a2418;border-radius:1px;overflow:hidden;border:1px solid #4a4030;box-shadow:inset 0 1px 2px rgba(0,0,0,0.6);position:relative"> <div style="width:38%;height:100%;background:linear-gradient(90deg,#c4a04a,#e8d060 70%,#faf0a0);box-shadow:inset 0 1px 0 rgba(255,255,255,0.25)"></div> <span style="position:absolute;top:0;bottom:0;left:25%;width:1px;background:rgba(0,0,0,0.3)"></span> <span style="position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(0,0,0,0.3)"></span> <span style="position:absolute;top:0;bottom:0;left:75%;width:1px;background:rgba(0,0,0,0.3)"></span> </div> <span style="width:0;border-right:11px solid #4a4030;border-top:7px solid transparent;border-bottom:7px solid transparent;flex-shrink:0"></span> </div> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;padding:5px 7px;background:#0e0c08;border:1px solid #4a4030;border-radius:2px;margin-bottom:7px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.5)"> <span style="font-size:9px;color:#e8d060;font-family:'Courier New',monospace;font-weight:700;letter-spacing:0.06em">Buffering 12%</span> <span style="display:flex;gap:3px;align-items:center"><span style="display:inline-block;width:14px;height:8px;border:1px solid #c4a04a;border-radius:1px;position:relative;background:#1a1410"><span style="position:absolute;top:1px;left:1px;right:7px;bottom:1px;background:#c4a04a"></span><span style="position:absolute;top:-2px;left:3px;right:3px;height:2px;background:#c4a04a;border-radius:1px 1px 0 0"></span></span><span style="font-size:7px;color:rgba(196,160,74,0.7);font-family:'Courier New',monospace;letter-spacing:0.04em">28.8k</span></span> </div> <div style="display:flex;gap:3px;margin-bottom:7px"> <span style="flex:1;padding:4px 0;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#3a3020,#1a1410);color:#c4a04a;border:1px solid #5a4830;border-radius:2px;box-shadow:inset 0 1px 0 rgba(196,160,74,0.15);letter-spacing:0.06em">BUFFER</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#e8d060,#a88820);color:#1a1410;border:1px solid #6a5010;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),0 0 4px rgba(232,208,96,0.3);letter-spacing:0.06em">PLAY</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#3a3020,#1a1410);color:#c4a04a;border:1px solid #5a4830;border-radius:2px;box-shadow:inset 0 1px 0 rgba(196,160,74,0.15);letter-spacing:0.06em">STOP</span> <span style="flex:1;padding:4px 0;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,#3a3020,#1a1410);color:#c4a04a;border:1px solid #5a4830;border-radius:2px;box-shadow:inset 0 1px 0 rgba(196,160,74,0.15);letter-spacing:0.06em">REC</span> </div> <div style="display:flex;justify-content:space-between;font-size:6px;color:rgba(196,160,74,0.35);font-family:'Courier New',monospace;letter-spacing:0.1em;padding-top:4px;border-top:1px solid #3a3020"><span>REQUIRES G2 - ver 6.0.6.96</span><span>SureStream TM</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">Stream A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">gold buffer / outbound</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">BUFFER</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">BUF</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">PLAY</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">BUF</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">PLAY</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">Stream B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">return / dial tail</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">BUFFER</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">BUF</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">PLAY</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">BUF</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">PLAY</span> </div> </div> </div> </div>

A softer option if you want warmth without a lot of extra detail.

18. Brown Glass

18

Brown Glass

ZNE

Demo buildPASS

Brownglass - firmware 2.5

SOCIAL - MIXVIEW - PODCASTS

SYNC MENU FM

80GB - WiFi SYNCwelcome to the social

Device A

sync strip / outbound

SYNC

01

Song title 01

Lyrics go here.

3:24 SYNC

02

Song title 02

Lyrics go here.

2:58 SYNC

03

Song title 03

Lyrics go here.

4:01 SYNC

04

Song title 04

Lyrics go here.

3:12 SYNC

Device B

return / glass bus

SYNC

01

Song title 05

Lyrics go here.

3:24 SYNC

02

Song title 06

Lyrics go here.

2:58 SYNC

03

Song title 07

Lyrics go here.

4:01 SYNC

04

Song title 08

Lyrics go here.

3:12 SYNC

Batch 02

A smoked-glass layout with darker tones and a calmer, more enclosed feel.

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

<div style="box-sizing:border-box;background:white;border:1px solid rgba(58, 76, 92, 0.12);box-shadow:0 2px 8px rgba(18, 28, 38, 0.08);overflow:hidden;margin:1.2em 0;max-width:100%;overflow-wrap:break-word;word-wrap:break-word"> <div style="box-sizing:border-box;padding:16px 18px 18px"> <div style="box-sizing:border-box;margin:0 0 14px;padding:0 0 12px;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.12em;color:#3d4f5e;font-weight:700">18</div> <h2 style="box-sizing:border-box;margin:0;font:600 20px/1.2 Georgia, serif;color:#1a2633">Brown Glass</h2> </div> <div style="box-sizing:border-box;margin:0 0 14px;padding:14px;background:linear-gradient(135deg,rgba(106,74,58,0.95) 0%,#3a2830 50%,rgba(168,74,127,0.2) 100%);border:1px solid #5a4038;border-radius:8px;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)"> <span style="position:absolute;top:-14px;right:-14px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(232,216,232,0.18) 0%,rgba(168,74,127,0.1) 50%,transparent 75%);pointer-events:none"></span> <span style="position:absolute;bottom:-8px;left:-8px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 70% 70%,rgba(168,74,127,0.15) 0%,transparent 70%);pointer-events:none"></span> <div style="box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;position:relative;z-index:1"> <span style="display:flex;align-items:center;gap:5px"><span style="width:10px;height:10px;background:radial-gradient(circle at 35% 30%,#faf0f4,#a84a7f);border-radius:50%;box-shadow:0 0 8px rgba(168,74,127,0.5)"></span><span style="font-size:8px;font-weight:700;color:#e8d8e8;letter-spacing:0.15em">ZNE</span></span> <span style="display:flex;align-items:flex-end;gap:1px"><span style="width:2px;height:3px;background:rgba(232,216,232,0.5)"></span><span style="width:2px;height:5px;background:rgba(232,216,232,0.7)"></span><span style="width:2px;height:7px;background:#e8d8e8"></span><span style="width:2px;height:9px;background:rgba(232,216,232,0.4)"></span></span> </div> <div style="box-sizing:border-box;padding:10px 11px;background:rgba(20,16,18,0.58);border-radius:6px;margin-bottom:8px;border:1px solid rgba(168,74,127,0.28);position:relative;z-index:1;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04)"> <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2px"><span style="font-size:11px;font-weight:700;color:#e8d8e8;letter-spacing:0.02em">Demo build</span><span style="font-size:6px;font-weight:700;color:rgba(232,216,232,0.45);letter-spacing:0.12em;padding:1px 4px;border:1px solid rgba(168,74,127,0.4);border-radius:1px">PASS</span></div> <div style="font-size:8px;color:rgba(232,216,232,0.65);letter-spacing:0.04em;margin-bottom:4px">Brownglass - firmware 2.5</div> <div style="display:flex;gap:4px;align-items:center;font-size:6px;color:rgba(232,216,232,0.4);font-family:'Courier New',monospace;letter-spacing:0.12em"><span>SOCIAL</span><span style="opacity:0.5"> - </span><span>MIXVIEW</span><span style="opacity:0.5"> - </span><span>PODCASTS</span></div> </div> <div style="display:flex;gap:4px;position:relative;z-index:1"> <span style="flex:1;padding:6px;text-align:center;font-size:8px;font-weight:700;background:linear-gradient(180deg,#8a5a48,#4a2e28);color:white;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);letter-spacing:0.06em">SYNC</span> <span style="flex:1;padding:6px;text-align:center;font-size:8px;font-weight:700;background:rgba(255,255,255,0.1);color:white;border-radius:3px;border:1px solid rgba(255,255,255,0.22);backdrop-filter:blur(2px);letter-spacing:0.06em">MENU</span> <span style="padding:6px 10px;text-align:center;font-size:7px;font-weight:700;background:linear-gradient(180deg,rgba(168,74,127,0.65),rgba(100,40,80,0.85));color:white;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);letter-spacing:0.06em">FM</span> </div> <div style="display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding-top:5px;border-top:1px solid rgba(168,74,127,0.22);font-size:6px;color:rgba(232,216,232,0.4);font-family:'Courier New',monospace;letter-spacing:0.12em;position:relative;z-index:1"> <span>80GB - WiFi SYNC</span><span>welcome to the social</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">Device A</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">sync strip / outbound</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">SYNC</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">SYNC</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">SYNC</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">SYNC</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">SYNC</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">Device B</div> <div style="box-sizing:border-box;font-size:12px;color:#3d4f5e;font-style:italic">return / glass bus</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">SYNC</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">SYNC</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">SYNC</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">SYNC</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">SYNC</span> </div> </div> </div> </div>

Good for darker playlists where a quieter frame suits the material.