2 files changed, 114 insertions, 0 deletions
diff --git a/backends/networking/wwwroot/files.html b/backends/networking/wwwroot/files.html
new file mode 100644
index 0000000000..8a2788905a
--- /dev/null
+++ b/backends/networking/wwwroot/files.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+	<head>
+		<title>ScummVM</title>
+		<meta charset="utf-8"/>
+		<link rel="stylesheet" type="text/css" href="style.css"/>
+	</head>
+	<body>
+		<div class="container">
+			<div class='header'>
+				<center><img src="logo.png"/></center>
+			</div>
+			<div class="controls">
+				<table class="buttons"><tr>
+					<td><a href="javascript:show('create_directory');">{create_directory_button}</a></td>
+					<td><a href="javascript:show('upload_file');">{upload_files_button}</a></td>
+				</tr></table>
+				<div id="create_directory" class="modal">
+					<p>{create_directory_desc}</p>
+					<form action="create">
+						<input type="text" name="directory_name" value=""/>
+						<input type="submit" value="{create_directory_button}"/>
+					</form>
+				</div>
+				<div id="upload_file" class="modal">
+					<p>{upload_file_desc}</p>
+					<form action="upload" method="post">
+						<input type="file" name="upload_file"/>
+						<input type="submit" value="{upload_file_button}"/>
+					</form>
+				</div>
+			</div>
+			<div class="content">
+				{content}
+			</div>
+		</div>
+		<script>
+			function show(id) {
+				var e = document.getElementById(id);
+				var visible = (e.style.display == "block");
+				if (visible) id = ""; //hide
+
+				e = document.getElementById("create_directory");
+				e.style.display = (e.id == id ? "block" : "none");
+				e = document.getElementById("upload_file");
+				e.style.display = (e.id == id ? "block" : "none");
+			}
+		</script>
+	</body>
+</html>
+\ No newline at end of file
diff --git a/backends/networking/wwwroot/style.css b/backends/networking/wwwroot/style.css
index 75c8378229..59d96671db 100644
--- a/backends/networking/wwwroot/style.css
+++ b/backends/networking/wwwroot/style.css
@@ -22,3 +22,67 @@ html {
 }
 
 .content p { margin: 0 0 6pt 0; }
+
+.controls {
+	padding: 8pt;
+	background: #FFF;
+	font-family: Tahoma;
+	font-size: 16pt;
+}
+
+.controls .buttons {
+	width: 100%;
+	max-width: 500pt;
+	margin: -8pt auto;
+	border: 0;
+	border-spacing: 0;
+}
+
+.controls .buttons td {
+	width: 50%;
+	text-align: center;
+	margin: 0;
+	padding: 0;
+}
+
+.controls .buttons a {
+	display: block;
+	height: 40pt;
+	line-height: 38pt;
+	vertical-align: middle;
+	color: #000;
+	text-decoration: none;
+}
+
+.controls .buttons a:hover {
+	background: #F3F3F3;
+}
+
+.modal {
+	margin-top: 10pt;
+	display: none;
+}
+
+.modal p { margin: 0 0 6pt 0; }
+
+#create_directory input[type="text"], #upload_file input[type="file"] {
+	width: calc(100% - 2 * 5pt);
+}
+
+.modal input {
+	border: 1px solid #EEE;
+	padding: 5pt;
+	font-size: 12pt;
+}
+
+.modal input[type="submit"] {
+	display: block;
+	margin: 6pt auto;
+	background: #DDD;
+	border: 0;
+}
+
+.modal input[type="submit"]:hover {
+	background: #F3F3F3;
+	cursor: pointer;
+}
+\ No newline at end of file