jacomyal/index.html

## index.html
<html>
<head>
<style>
*{
	margin: 0;
	padding: 0;
	font-family: Helvetica;
	font-size: 8pt;
}

#head{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 20px;
	background-color: #f0f0f0;
}

#foot{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 112px;
	background-color: #ccc;
}

#main{
	position: absolute;
	top: 20px;
	bottom: 112px;
	left: 0;
	right: 0;
	background-color: #fff;
}

#query{
	float: left;
	width: 36%;
	height: 112px;

	background-color: #ccc;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(181,181,181)),
		color-stop(0.99, rgb(224,224,224))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(181,181,181) 0%,
		rgb(224,224,224) 99%
	);
}

#query_query{
	float: left;
	height: 112px;
	width: 60%;
}

#query_top, #query_bottom{
	width: 100%;
	height: 50%;
}

#query_title{
	float: left;
}

#query_input{
	float: left;
	width: 34%;
}

#query_properties{

}

#query_buttons{
	float: left;
	width: 40%;
	height: 112px;
}

#user{
	float: left;
	height: 112px;
	width: 32%;
	background-color: #f0f0f0;
}

#legend{
	float: left;
	height: 112px;
	width: 32%;
	background-color: #f0f0f0;
}

.button{
	display: block;
}
</style>
<body>
<div id="head">
</div>
<div id="main">
</div>
<div id="foot">
<div id="query">
<div id="query_query">
<div id="query_top">
<div id="query_title">github/</div>
<input type="text" id="query_input" onkeypress="onKeyPress(this);"/>
</div>
<div id="query_bottom">
<form name="query_properties" id="query_properties">
nodes size:
<select name="query_size" onchange="setSize(this.value);">
</select>
nodes color:
<select name="query_color" onchange="setColor(this.value,graphAttributes);">
</select>
</form>
</div>
</div>
<div id="query_buttons">
<br/>
<a href="#" class="button" onclick="toggleDisplayEdges();">
<span class="edges">display edges</span>
</a>
<a href="#" class="button" onclick="toggleDisplayLabels();">
<span class="labels">display labels</span>
</a>
<a href="#" class="button" onclick="toggleFishEye();">
<span class="fisheye">use fisheye zoom</span>
</a>
</div>
</div>
<div id="user">
<div id="user_avatar">
</div>
<div id="user_info">
</div>
</div>
<div id="legend">
<div id="legend_title">
</div>
<div id="legend_elements">
</div>
</div>
</div>
</body>
</html>
	<html>
	<head>
	<style>
	*{
	margin: 0;
	padding: 0;
	font-family: Helvetica;
	font-size: 8pt;
	}

	#head{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 20px;
	background-color: #f0f0f0;
	}

	#foot{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 112px;
	background-color: #ccc;
	}

	#main{
	position: absolute;
	top: 20px;
	bottom: 112px;
	left: 0;
	right: 0;
	background-color: #fff;
	}

	#query{
	float: left;
	width: 36%;
	height: 112px;

	background-color: #ccc;
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(181,181,181)),
	color-stop(0.99, rgb(224,224,224))
	);
	background-image: -moz-linear-gradient(
	center bottom,
	rgb(181,181,181) 0%,
	rgb(224,224,224) 99%
	);
	}

	#query_query{
	float: left;
	height: 112px;
	width: 60%;
	}

	#query_top, #query_bottom{
	width: 100%;
	height: 50%;
	}

	#query_title{
	float: left;
	}

	#query_input{
	float: left;
	width: 34%;
	}

	#query_properties{

	}

	#query_buttons{
	float: left;
	width: 40%;
	height: 112px;
	}

	#user{
	float: left;
	height: 112px;
	width: 32%;
	background-color: #f0f0f0;
	}

	#legend{
	float: left;
	height: 112px;
	width: 32%;
	background-color: #f0f0f0;
	}

	.button{
	display: block;
	}
	</style>
	<body>
	<div id="head">
	</div>
	<div id="main">
	</div>
	<div id="foot">
	<div id="query">
	<div id="query_query">
	<div id="query_top">
	<div id="query_title">github/</div>
	<input type="text" id="query_input" onkeypress="onKeyPress(this);"/>
	</div>
	<div id="query_bottom">
	<form name="query_properties" id="query_properties">
	nodes size:
	<select name="query_size" onchange="setSize(this.value);">
	</select>
	nodes color:
	<select name="query_color" onchange="setColor(this.value,graphAttributes);">
	</select>
	</form>
	</div>
	</div>
	<div id="query_buttons">
	<br/>
	<a href="#" class="button" onclick="toggleDisplayEdges();">
	<span class="edges">display edges</span>
	</a>
	<a href="#" class="button" onclick="toggleDisplayLabels();">
	<span class="labels">display labels</span>
	</a>
	<a href="#" class="button" onclick="toggleFishEye();">
	<span class="fisheye">use fisheye zoom</span>
	</a>
	</div>
	</div>
	<div id="user">
	<div id="user_avatar">
	</div>
	<div id="user_info">
	</div>
	</div>
	<div id="legend">
	<div id="legend_title">
	</div>
	<div id="legend_elements">
	</div>
	</div>
	</div>
	</body>
	</html>