diff --git a/static/index2.html b/static/index2.html index 4cf94a8..4f6ecbc 100644 --- a/static/index2.html +++ b/static/index2.html @@ -5,68 +5,7 @@ WebSocket - +
diff --git a/static/style2.css b/static/style2.css new file mode 100644 index 0000000..0ee5f9e --- /dev/null +++ b/static/style2.css @@ -0,0 +1,64 @@ +body { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 128px 1fr 1fr 32px; + gap: 0 0; + grid-auto-flow: row; + grid-template-areas: "header" "playlist" "db" "footer"; +} + +header { + display: grid; + grid-template-columns: 128px 1fr 1fr 1fr; + grid-template-rows: 1fr; + gap: 0 0; + grid-auto-flow: row; + grid-template-areas: "config playback-controls playlist-controls track-info"; + grid-area: header; +} + +div { + border: dotted 1px; +} + +section.playlist { + grid-area: playlist; +} + +header .config { + grid-area: config; +} + +header .playback-controls { + grid-area: playback-controls; +} + +header .playlist-controls { + grid-area: playlist-controls; +} + +header .track-info { + grid-area: track-info; +} + +footer { + grid-area: footer; +} + +section.db { + display: grid; + grid-template-columns: 0.7fr 1.3fr; + grid-template-rows: 1fr; + gap: 0 0; + grid-auto-flow: row; + grid-template-areas: "tabs result"; + grid-area: db; +} + +.db .tabs { + grid-area: tabs; +} + +.db .result { + grid-area: result; +}