ソースを参照

initial version of the web frontend

this version has limited functionality and will not technically work until we know the URL to hook it to.
emma 4 年 前
コミット
e855b07991
2 ファイル変更114 行追加0 行削除
  1. 113 0
      Qwixx/frontend/index.html
  2. 1 0
      Qwixx/frontend/jquery.js

+ 113 - 0
Qwixx/frontend/index.html

@@ -0,0 +1,113 @@
+<html>
+<head>
+<style>
+body {
+	width:80vw;
+	margin-left:auto;
+	margin-right:auto;
+	font-family:sans-serif;
+	}
+#output {white-space:pre;}
+#output>div {margin-bottom:20px;}
+section {background-color:#e46920;padding:15px;margin-top:40px;}
+section:first-of-type>div {
+	display:inline-block;
+	padding:20px;
+	margin-right:20px;
+    vertical-align:middle;
+    background-color: #e46920;
+    box-shadow: 0 0 30px #71340f;
+	}
+h1,h2,h3 {color:#bde420;}
+h1 {font-size:50px;}
+h3 {font-size:30px;}
+button {
+	padding:10px;
+    border-radius:10px;
+    border:none;
+    background-color:white;
+    font-weight:bold;
+    }
+textarea {
+	height:100px;
+    width:300px;
+    display:block;
+    margin-bottom:20px;
+	}
+
+</style>
+</head>
+<body>
+
+<h1>my first frontend</h1>
+
+
+<section>
+	<h3>send data to the server</h3>
+
+
+	<div>
+		<button id="request1">meow</button>
+		<br /><br /><br />
+		<button id="request2">random data</button>
+	</div>
+	<div>
+		<textarea id="userInput"></textarea>
+		<button id="request3">submit</button>
+	</div>
+</section>
+<section>
+	<h3>server's response</h3>
+	<!--<img id="catOutput" src="">-->
+	<div id="output"></div>
+</section>
+
+</body>
+
+
+<script type="text/javascript" src="jquery.js"></script>
+<script>
+// when a button is clicked, send data to the server
+$("button").click(function()
+	{
+	// onscreen log - historical requests and responses
+	// if the meow button is clicked, send the string "meow" to the server
+	if($(this).attr("id") === "request1")
+		{var data = "meow";}
+	// if the random button is clicked, come up with a random string of random length to send
+	else if($(this).attr("id") === "request2")
+		{
+		var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,";\/?<>';
+		var cl = characters.length;
+		var stringLength = Math.floor(Math.random()*300);
+		var data = "";
+		for(var i=0;i<stringLength;i++)
+			{
+			data += characters[Math.floor(Math.random()*cl)];
+			}
+		}
+	// if the text box button is clicked, send the content of the text box
+	else if($(this).attr("id") === "request3")
+		{var data = $("#userInput").val();}
+	// send the data to the server and display the response
+	$.ajax({
+		url:"mmcgo.com",
+		type:"post",
+		data:{},
+		success:function(returnData)
+			{
+			returnData = "server says yay!";
+			var temp = $("<div></div>");
+			temp.append("<div>request: "+data+"</div>")
+			temp.append("<div>response: "+returnData+"</div>")
+
+			$("#output").prepend(temp);
+			//var catWidth = Math.floor(Math.random()*300);
+			//var catHeight = Math.floor(Math.random()*300);
+			//$("#catOutput").attr("src","http://placekitten.com/"+catWidth+"/"+catHeight);
+			}
+		});
+
+	});
+</script>
+</html>

ファイルの差分が大きいため隠しています
+ 1 - 0
Qwixx/frontend/jquery.js


この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません