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,18 +11,16 @@
<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()"> <input type="checkbox" id="run" name="run" checked><label for="run">Run after Saving</label>
<input type="checkbox" id="run" name="run" checked><label for="run">Run after Saving</label> <input type="button" id="revert" name="revert" value="Revert to Saved" onclick="revert()">
<input type="button" id="revert" name="revert" value="Revert to Saved" onclick="revert()"> <button onclick="addLicense()"><img src="/terminal/agplv3-88x31.png" width="34" height="12"> Add License Header</button>
<button onclick="addLicense()"><img src="/terminal/agplv3-88x31.png" width="34" height="12"> Add License Header</button>
</div>
<textarea id="editor" class="main">$(SOURCE)</textarea>
<script src="/terminal/editor.js"></script>
</div> </div>
<textarea id="editor" class="main">$(SOURCE)</textarea>
<script src="/terminal/editor.js"></script>
</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,26 +7,24 @@
<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> <a href="/">home</a>
<a href="/">home</a> <a href="$(EDIT_SOURCE)">edit</a>
<a href="$(EDIT_SOURCE)">edit</a> <a href="$(VIEW_SOURCE)">view source</a>
<a href="$(VIEW_SOURCE)">view source</a> <a href="/~cory/about">about</a>
<a href="/~cory/about">about</a> <span id="status"></span>
<span id="status"></span> <span id="update">update available! <a href="">refresh</a> to update</span>
<span id="update">update available! <a href="">refresh</a> to update</span> <span id="login"></span>
<span id="login"></span>
</div>
<div id="terminals" class="vbox"><div id="terminal_" class="terminal" style="flex: 1 1"></div></div>
<div class="input">
<span id="target"></span>
<span id="prompt">&gt;</span>
<input type='text' id='input'></input>
</div>
<script src="/terminal/client.js"></script>
</div> </div>
<div id="terminals" class="vbox"><div id="terminal_" class="terminal" style="flex: 1 1"></div></div>
<div class="input">
<span id="target"></span>
<span id="prompt">&gt;</span>
<input type='text' id='input'></input>
</div>
<script src="/terminal/client.js"></script>
</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 {