tobru/mopidy-pummeluff
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

FEATURE: Add first static web UI

Browse source
This commit is contained in:
Dominique Barton 2019-02-21 22:50:26 +01:00
parent aac4cf139e
commit 23326f7eee
3 changed files with 206 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
mopidy_pummeluff/__init__.py
View file

@ -49,6 +49,11 @@ class Extension(ext.Extension):
'''
registry.add('frontend', PummeluffFrontend)
registry.add('http:static', {
'name': self.ext_name,
'path': os.path.join(os.path.dirname(__file__), 'webui'),
})
registry.add('http:app', {
'name': self.ext_name,
'factory': app_factory,

40
mopidy_pummeluff/webui/index.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Pummeluff Card Management</title>
</head>
<body>
<header>
<h1>Pummeluff Card Management</h1>
</header>
<main>
<div id="register">
<h2>Register New Card</h2>
<div>
<form>
<label for="uid">UID</label>
<input id="uid" type="text" placeholder="The unique card ID">
<a id="read-rfid-card" href="#">Read UID from RFID card…</a>
<label for="alias">Alias</label>
<input id="alias" type="text" placeholder="Your personal alias / identifier">
<label for="type">Type</label>
<select>
</select>
<label for="parameter">Parameter</label>
<input id="parameter" type="text" placeholder="A type-specific parameter">
<button role="submit">✓ Register Card</button>
</form>
</div>
</div>
<div id="registered">
<h2>Registered Cards</h2>
<div id="cards"></div>
</div>
</main>
</body>
</html>

161
mopidy_pummeluff/webui/style.css Normal file
View file

@ -0,0 +1,161 @@
/*
* Main Elements
*/
*,
*:before,
*:after
{
box-sizing: border-box;
}
html,
body
{
margin : 0;
padding: 0;
}
body
{
min-height : 100vh;
font-family : sans-serif;
font-size : 14px;
color : #eee;
background-color: #222;
}
/*
* Headings
*/
h1,
h2
{
margin: 0 0 10px 0;
}
/*
* Structural page elements
*/
main
{
display: flex;
}
header
{
padding: 20px 20px 10px 20px;
}
main > div
{
padding: 20px;
}
/*
* Register Form
*/
form
{
background-color: #333;
padding : 20px;
width : 250px;
}
label
{
display: block;
margin : 10px 0 5px 0;
}
label:first-child
{
margin-top: 0;
}
input,
select,
button
{
width : 100%;
border : 0;
padding : 10px;
border-width : 0 0 2px 0;
border-style : solid;
border-color : #333;
background-color: #222;
color : #eee;
outline : none;
}
select
{
height: 35px;
}
input::placeholder
{
color: #666;
}
input:focus
{
border-bottom-color: #fa0;
}
button
{
background-color: #4a4;
color : #eee;
font-weight : bold;
margin-top : 10px;
}
a#read-rfid-card
{
text-decoration: none;
color: #fa0;
font-size: 11px;
}
/*
* Registered Cards
*/
div.card
{
display : inline-block;
background-color: #eee;
color : #222;
box-shadow : 1px 1px 5px #000;
padding : 10px;
margin : 0 20px 20px 0;
width : 400px;
line-height : 20px;
}
div.card span.uid,
div.card span.type,
div.card span.parameter
{
font-family: Courier New, monospace;
}
div.card span.type
{
display : inline-block;
background-color: #888;
color : #eee;
font-size : 11px;
line-height : 11px;
padding : 2px 4px;
border-radius : 10px;
}
div.card span.alias,
div.card span.parameter
{
display: block;
}