Browse Source

Merge pull request #7 from tripathiakshit/master

Merger
Sunit Kumar Nandi 11 years ago
parent
commit
7b9bb6b932
4 changed files with 129 additions and 22 deletions
  1. 35 5
      header.html
  2. 7 9
      index.html
  3. 9 8
      input.html
  4. 78 0
      style.css

+ 35 - 5
header.html

@@ -1,9 +1,39 @@
+<!-- Code by Sunit Kumar Nandi -->
+
 <!DOCTYPE html>
 <html>
+<head>
+	<title>WebGCC</title>
+	<link href='http://fonts.googleapis.com/css?family=Nixie+One|Iceland' rel='stylesheet' type='text/css'>
+	<!-- I'd link to the CSS, but this baby deserves her own style! -->
+</head>
+<body>
+<style type="text/css">
+	h1 {
+		font-family: "Iceland", cursive;
+		color: #FFFFFF;
+	}
 
-<!-- Header page -->
-<!-- Centre-aligning the text -->
-<h1 align="center">WebGCC: simple GCC web interface</h1>
-<p align="center">Test your C/C++ codes online. By Sunit Kumar Nandi.</p>
-
+	p {
+		font-family: "Nixie One", cursive;
+		color: #FFFFFF;
+	}
+	body{
+		background-image: -webkit-gradient(
+		linear,
+		left top,
+		left bottom,
+		color-stop(0, #3B7FD9),
+		color-stop(1, #8426FF)
+		);
+		background-image: -o-linear-gradient(bottom, #3B7FD9 0%, #8426FF 100%);
+		background-image: -moz-linear-gradient(bottom, #3B7FD9 0%, #8426FF 100%);
+		background-image: -webkit-linear-gradient(bottom, #3B7FD9 0%, #8426FF 100%);
+		background-image: -ms-linear-gradient(bottom, #3B7FD9 0%, #8426FF 100%);
+		background-image: linear-gradient(to bottom, #3B7FD9 0%, #8426FF 100%);
+	}
+</style>
+<h1 align="center">GCC web interface</h1>
+<p align="center">Test your C/C++ codes online. By Sunit Kumar Nandi</p>
+</body>
 </html>

+ 7 - 9
index.html

@@ -1,14 +1,14 @@
-<!DOCTYPE html>
-<html>	
+<!-- Code by Sunit Kumar Nandi -->
 
-<!-- Interface page -->
+<!DOCTYPE html>
+<html lang="en">	
 <head>
-<title>Web interface for GCC compiler</title>
+	<meta charset="utf-8">
+	<title>Web interface for GCC compiler</title>
+	<link rel="stylesheet" type="text/css" href="./style.css">
 </head>
-
-
 <!-- Create two horizontal frames of 20% and 80% height -->
-<frameset rows="20%,80%">
+<frameset rows="16%,84%">
 <!-- Load the header -->
 <frame name="header" src="header.html">
 <!-- Create two vertical frames of 53% and 47% width -->
@@ -19,6 +19,4 @@
     <frame name="output" src="output.php">
     </frameset>
 </frameset>
-
-
 </html>

+ 9 - 8
input.html

@@ -1,8 +1,11 @@
-<html>
+<!-- Code by Sunit Kumar Nandi -->
 
+<!DOCTYPE html>
 <head>
 <!-- Inserting CodeMirror text editor -->
 <!-- Credit for the idea goes to Aditya Rajan -->
+<meta charset="utf-8" script=>
+<link rel="stylesheet" type="text/css" href="style.css">
 <link rel="stylesheet" href="assets/codemirror.css">
 <script src="assets/codemirror.js"></script>
 <script src="assets/matchbrackets.js"></script>
@@ -16,7 +19,7 @@
 Write your program here:
 <br>
 <!-- Accepting program code -->
-<textarea id="code" name="data" cols="80" rows="10">
+<textarea id="code" name="data" cols="100" rows="10">
 #include<iostream>
 using namespace std;
 
@@ -29,18 +32,18 @@ int main()
 <br><br>
 <!-- Accepting standard input -->
 Standard input:<br>
-<textarea name="stdin" cols="60" rows="10">
+<textarea name="stdin" cols="60" rows="10" placeholder="Standard input">
 </textarea>
 <br><br>
 <!-- Accepting command-line agruments -->
-Command line arguments: <input type="text" name="args">
+<input type="text" name="args" placeholder="Command-line arguments">
 <br><br>
 <!-- Submit button goes here -->
-<input type="submit" value="Run">
+<button type="submit">Run</button>
 </form>
 <br>
 <!-- Provide a link to text input option -->
-<a href="textinput.php" target="output">Click here to submit text file input</a>
+<button href="textinput.php" target="output">Submit a text file</button>
 
 <script>
 	var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
@@ -52,7 +55,5 @@ Command line arguments: <input type="text" name="args">
 	mode: "text/x-c++src"
 	});
 </script>
-
 </body>
-
 </html>

+ 78 - 0
style.css

@@ -0,0 +1,78 @@
+/* 
+
+Stylesheet by Akshit Tripathi 
+Fonts by Google Fonts
+Thanks Bootstrap for some code.
+
+*/
+
+@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400|Alegreya+Sans+SC:800);
+body {
+	background-color: #FFFAFA;
+	margin: 0;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+textarea {
+	font-family: "Source Code Pro", sans-serif;
+	color: #272822;
+	background-color: #FFFFFF;
+	resize: none;
+	border: solid;
+	border-width: 1px;
+	margin-left: 3px;
+}
+
+p {
+	color: rgba(0, 0, 0, 0.5);
+	font-family: "Helvetica Neue";
+	font-weight: 400;
+	margin: 20px 0; 
+	line-height: 1.6;
+}
+
+button {
+	padding: 12px 48px;
+	font-family: "Alegreya Sans SC", sans-serif;
+	background: linear-gradient (to bottom, #616159 30%, #DEDEDE 70%);
+	color: rgba(0, 0, 0, 0.7);
+	font-size: 12pt;
+}
+
+input {
+	height: 24px;
+	border-radius: 5px;
+	border: solid;
+	border-width: 1px;
+	width: 300px;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+input:hover {
+	border-color: #6496FF;
+}
+
+input[type=text], textarea {
+  -webkit-transition: all 0.30s ease-in-out;
+  -moz-transition: all 0.30s ease-in-out;
+  -ms-transition: all 0.30s ease-in-out;
+  -o-transition: all 0.30s ease-in-out;
+  outline: none;
+  padding: 3px 0px 3px 3px;
+  margin: 5px 1px 3px 0px;
+  border: 1px solid #DDDDDD;
+}
+ 
+input[type=text]:focus, textarea:focus {
+  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+  padding: 3px 0px 3px 3px;
+  margin: 5px 1px 3px 0px;
+  border: 1px solid rgba(81, 203, 238, 1);
+}
+
+button:hover {
+	padding: 12px 48px;
+	font-family: "Alegreya Sans SC", sans-serif;
+	background: linear-gradient (to bottom, #EDEDED 70%, #DEDEDE 30%);
+	color: rgb(0, 0, 0);
+}