cancer_predict/modules/cancerpredict/cancer_predict_index.html.erb

<script type="text/javascript" src="/assets/jquery.smartmenus.min.js"></script>
<script type="text/javascript" src="/assets/jquery.smartmenus.bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/cancer_predict.js"></script>
{{table}}
<style>
	#cancer_table *[data-key]{
		padding: 0.375em 0;
	}
	.cencer_table_name{
		display: inline-block;
		vertical-align: middle;
		width: 6.25em;
		color:#5d7ca2;
	}
	.cancer_table_btn{
	    margin-right: 0.5em;
		color:#5d7ca2;
		border-color: #5d7ca2;
		font-weight: 600;
	}
	.cancer_table_btn:last-child{
		margin-right:auto;
	}
	#cancer_table{
		font-size:0.825em;
	}
	input.num_only{
		color: black;
		border-top: 0.125em solid rgb(221, 221, 221);
		width: 4.125em;
		padding: 0em 0em 0.25em;
		border-left: 0.125em solid rgb(221, 221, 221);
		text-align: center;
		font-size: 0.875em;
		background-color: rgb(255, 255, 255);
		height: 2.25em;
	}
	#cancer_table_left{
		float:left;
		width:50%;
	}
	#cancer_table_right{
		float:right;
		width:50%;
	}
	#cancer_table_submit{
	    margin-left: 1em;
		float: right;
		background-color: rgb(210, 105, 0);
		color: white;
		border: 0em;
		padding: 0.125em 0.5em;
		border-radius: 0.5em;
	}
	#cancer_table_reset{
	    float: right;
		background-color: rgb(210, 105, 0);
		color: white;
		border: 0em;
		padding: 0.125em 0.5em;
		border-radius: 0.5em;
	}
	.btn-sub{
		background:url("/assets/cancerpredict/triangle_sub.png")  no-repeat top transparent;
		position: relative;
		width: 1.875em;
		border: 0;
		height: 1.875em;
		background-size: contain;
		top:1em;
		bottom: -0.7em;
		padding: 0;
	}
	.btn-add{
		background:url("/assets/cancerpredict/triangle_add.png")  no-repeat top transparent;
		position: relative;
		width: 1.875em;
		border: 0;
		height: 1.875em;
		background-size: contain;
		right: 1.815em;
		top: -0.3em;
		padding: 0;
	}
	.cancer_table_btn.active{
		color: #333;
		background-color: #e6e6e6;
		border-color: #8c8c8c;
	}
	.cancertable_empty{
		border: 3px solid pink !important;
		border-radius: 5px !important;
		padding: 2px !important;
	}
	#result_title{
		background-color: rgb(210, 105, 0);
		color: white;
		border: 0em;
		padding: 0.125em 0.5em;
		border-radius: 0.5em;
	}
	.result_tab{
		background: #023d79;
		background: linear-gradient(135deg, transparent 0.3em, #023d79 0);
		border: none;
		float:left;
		padding: 0.5em 0.125em 0.5em 0.5em;
		margin-top: 0.5em;
		cursor: pointer;
	}
	.result_tab:hover{
		background: #d16801;
		background: linear-gradient(135deg, transparent 0.3em, #d16801 0);
		padding: 0.8em 0.125em 0.5em 1em;
		margin-left: -0.5em;
	}
	.result_tab > a{
		writing-mode: vertical-lr;
		-webkit-writing-mode: vertical-lr;
		color: white;
	}
	.result_tab_group{
		width:20%;
		margin:0;
	}
</style>