Added rough SVG support. Added doctypes to all of my HTML, and tried to fix some CSS issues that happened as a result.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3223 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2016-04-30 18:28:33 +00:00
parent 25d97e5e3b
commit 0bd836e915
5 changed files with 57 additions and 38 deletions

View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<title>Auth</title> <title>Auth</title>

View File

@ -171,6 +171,19 @@ function print(terminal, data) {
autoScroll(terminal); autoScroll(terminal);
} }
function printSvg(container, data, name, namespace) {
var node = document.createElementNS("http://www.w3.org/2000/svg", name);
for (var i in data.attributes) {
node.setAttribute(i, data.attributes[i]);
}
if (data.children) {
for (var i in data.children) {
node.appendChild(printSvg(node, data.children[i], data.children[i].name));
}
}
return node;
}
function printStructured(container, data) { function printStructured(container, data) {
if (typeof data == "string") { if (typeof data == "string") {
container.appendChild(document.createTextNode(data)); container.appendChild(document.createTextNode(data));
@ -197,6 +210,8 @@ function printStructured(container, data) {
if (data.name) { if (data.name) {
node.setAttribute("id", "iframe_" + data.name); node.setAttribute("id", "iframe_" + data.name);
} }
} else if (data.svg) {
node = printSvg(container, data.svg, "svg");
} else if (data.image) { } else if (data.image) {
node = document.createElement("img"); node = document.createElement("img");
node.setAttribute("src", data.image); node.setAttribute("src", data.image);

View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<title>Web Terminal</title> <title>Web Terminal</title>
@ -10,9 +11,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link type="image/png" rel="shortcut icon" href="/terminal/favicon.png"></link> <link type="image/png" rel="shortcut icon" href="/terminal/favicon.png"></link>
</head> </head>
<body> <body style="display: flex; flex-flow: column">
<div id="body"> <div class="navigation">
<div>
<input type="button" id="back" name="back" value="Back" onclick="back()"> <input type="button" id="back" name="back" value="Back" onclick="back()">
<input type="button" id="save" name="save" value="Save" onclick="save()"> <input type="button" id="save" name="save" value="Save" onclick="save()">
<input type="button" id="saveAs" name="saveAs" value="Save As" onclick="saveAs()"> <input type="button" id="saveAs" name="saveAs" value="Save As" onclick="saveAs()">
@ -22,6 +22,5 @@
</div> </div>
<textarea id="editor" class="main">$(SOURCE)</textarea> <textarea id="editor" class="main">$(SOURCE)</textarea>
<script src="/terminal/editor.js"></script> <script src="/terminal/editor.js"></script>
</div>
</body> </body>
</html> </html>

View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<title>Tilde Friends</title> <title>Tilde Friends</title>
@ -6,8 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!--HEAD--> <!--HEAD-->
</head> </head>
<body> <body style="display: flex; flex-flow: column">
<div id="body">
<div class="navigation"> <div class="navigation">
<span>~😎</span> <span>~😎</span>
<span id="title">Tilde Friends</span> <span id="title">Tilde Friends</span>
@ -26,6 +26,5 @@
<input type='text' id='input'></input> <input type='text' id='input'></input>
</div> </div>
<script src="/terminal/client.js"></script> <script src="/terminal/client.js"></script>
</div>
</body> </body>
</html> </html>

View File

@ -1,24 +1,29 @@
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body { body {
font-family: monospace; font-family: monospace;
background-color: #002b36; background-color: #002b36;
color: #eee8d5; color: #eee8d5;
}
#body {
display: flex;
flex-flow: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0;
margin: 0;
} }
.navigation { .navigation {
height: auto; height: auto;
width: 100%; margin: 4px;
} }
#terminals { #terminals {
flex: 1; flex: 1;
flex-flow: column; flex-flow: column;
margin: 4px;
} }
#logo { #logo {