Initial commit
This commit is contained in:
115
templates/display.html
Normal file
115
templates/display.html
Normal file
@@ -0,0 +1,115 @@
|
||||
{% extends "layout/default.html" %}
|
||||
|
||||
{% block extend_head %}
|
||||
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
|
||||
<style>
|
||||
display:before {
|
||||
content: attr(title);
|
||||
}
|
||||
|
||||
displaylist:before {
|
||||
content: "Displays";
|
||||
|
||||
background-color: #333;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
displaylist {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
background-color: #242424;
|
||||
|
||||
transition: transform .2s ease, opacity .2s ease;
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
displaylist[hidden], displaylist:focus {
|
||||
transform: scale(.96);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
scrollcontainer {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
displaylist list {
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
displaylist list > a {
|
||||
border: 2px solid black;
|
||||
padding: 1em;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<displaylist hidden>
|
||||
<scrollcontainer>
|
||||
<list></list>
|
||||
</scrollcontainer>
|
||||
</displaylist>
|
||||
<display></display>
|
||||
<script>
|
||||
const displayList = document.getElementsByTagName("displaylist")[0];
|
||||
const display = document.getElementsByTagName("display")[0];
|
||||
const socket = io();
|
||||
|
||||
socket.on("connect", () => {
|
||||
socket.emit("display", {action: "list"});
|
||||
//socket.emit("connect", {data: "ฅ^•ﻌ•^ฅ"});
|
||||
});
|
||||
|
||||
socket.on("display", (json) => {
|
||||
switch(json.action) {
|
||||
default:
|
||||
console.warn("Unknown data: " + json);
|
||||
break;
|
||||
case "list":
|
||||
onDisplayList(json.value);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
/*socket.on("display", (title, grid_column, grid_row) => {
|
||||
a = title;
|
||||
b = grid_column;
|
||||
c = grid_row;
|
||||
display.title = title;
|
||||
display.grid_column = grid_column;
|
||||
display.grid_row = grid_row;
|
||||
});*/
|
||||
|
||||
function onDisplayList(list) {
|
||||
console.log(list);
|
||||
|
||||
function add(item) {
|
||||
let displayOption = document.createElement("a");
|
||||
displayOption.innerText = item;
|
||||
displayList.getElementsByTagName("list")[0].appendChild(displayOption);
|
||||
}
|
||||
|
||||
displayList.getElementsByTagName("list")[0].innerHTML = "";
|
||||
for (item in list) {
|
||||
add(item);
|
||||
}
|
||||
add("+");
|
||||
add("+");
|
||||
add("+");
|
||||
|
||||
displayList.hidden = false;
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
20
templates/edit.html
Normal file
20
templates/edit.html
Normal file
@@ -0,0 +1,20 @@
|
||||
{% extends "layout/default.html" %}
|
||||
|
||||
{% block extend_head %}
|
||||
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
|
||||
<script>
|
||||
const socket = io();
|
||||
|
||||
socket.on("connect", () => {
|
||||
//socket.emit("connect", {data: "ฅ^•ﻌ•^ฅ"});
|
||||
});
|
||||
|
||||
socket.on("msg", (data) => {
|
||||
console.log(data);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% endblock %}
|
||||
20
templates/layout/default.html
Normal file
20
templates/layout/default.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
{% if title %}
|
||||
<title>{{ title }} - Webug</title>
|
||||
{% else %}
|
||||
<title>Webug</title>
|
||||
{% endif %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/fontawesome.min.css') }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/rubik.font.css') }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css') }}">
|
||||
{% block extend_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
51
templates/main.html
Normal file
51
templates/main.html
Normal file
@@ -0,0 +1,51 @@
|
||||
{% extends "layout/default.html" %}
|
||||
|
||||
{% block extend_head %}
|
||||
<style>
|
||||
body {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
gap: 5%;
|
||||
padding: 5%;
|
||||
}
|
||||
|
||||
main a {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
|
||||
border: 2px solid black;
|
||||
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
transition: .2s ease background-color;
|
||||
}
|
||||
|
||||
main a:hover, main a:focus {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
main a:active {
|
||||
background-color: #555;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<a href="display">
|
||||
<i class="fas fa-desktop fa-2x"></i>
|
||||
<span>Open display</span>
|
||||
</a>
|
||||
<a href="edit">
|
||||
<i class="fas fa-edit fa-2x"></i>
|
||||
<span>Edit display</span>
|
||||
</a>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user