cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Packages Projects 1 Releases Activity

static: start of flexbox implementation

Browse source
This commit is contained in:
coon 2023-11-27 01:55:09 +01:00
parent 32291bccb8
commit 52e37fcacb
3 changed files with 76 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
static/flexbox/index.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sanic - Flexbox layout</title>
<link rel="stylesheet" href="sanic.css">
<script src="sanic.js"></script>
</head>
<body>
<div id="flexbox-container">
<div id="controls-top">
<div id="top-left-controls">
<button>Login</button>
<button>Config</button>
</div>
<div id="playback-controls">
<div>
<button>⏮️</button>
<button>⏯️</button>
<button>⏹️</button>
<button>⏭️</button>
</div>
<div>
<label for="progress"></label>
<input type="range" id="progress" name="progress" min="0" max="100" />
</div>
</div>
<div id="queue-controls">
</div>
</div>
<div id="queue">
queue
</div>
<div id="controls_bottom">
controls bottom
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>

33
static/flexbox/sanic.css Normal file
View file

@ -0,0 +1,33 @@
body {
background-color: #09101d;
color: #bbb;
}
div {
border: 1px dashed white;
}
button {
background-color: #28374a;
color: #bbb;
}
#flexbox-container {
display: flex;
flex-direction: column;
}
#controls-top {
display: flex;
flex-direction: row;
}
#top-left-controls {
display: flex;
flex-direction: column;
}
#playback-controls {
display: flex;
flex-direction: column;
}

0
static/flexbox/sanic.js Normal file
View file