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-of-type{
		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:right;
		padding: 0.5em 0.125em 0.5em 0.5em;
		margin-top: 0.5em;
		cursor: pointer;
	}
	#cancer_table a:hover{
		text-decoration: none;
		color: #5d7ca2;
	}
	#result_contents{
		padding-top: 2em;
	}
	#choice_fields{
		padding: 2em 0 0 calc(20% - 1.625em);
	}
	.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.active{
		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;
		float: left;
	}
	#cancer_predict_result{
		width: 50%;
		float: left;
	}
	#cancer_table_left_result{
		width: 50%;
		float: left;
	}
	#cancer_table_right_result{
		width: 50%;
		float: right;
	}
	.result_content_group{
		width: 80%;
		margin: 0;
		float: right;
	}
	.result_content{
		display: none;
		min-height: 25em;
		border: 0.125em solid #c0cbdd;
		padding: 0.5em;
	}
	.result_content:first-of-type{
		display: block;
	}
	.result_content  a{
		color: #5d7ca2;
	}
	.result_content  p{
		color: #5d7ca2;
	}
	.cancer_years{
		float:left;
		color: #5d7ca2;
		background-color: #fff;
		border-color: #5d7ca2;
		border-width: 0.125em;
		margin: 0em;
	}
	.cancer_years:first-of-type{
		margin-left: 1em;
	}
	.cancer_years:last-of-type{
		margin-right: 1em;
	}
	.cancer_form_field{
		margin-left: 1em;
	}
	#result_table_content a{
		float:left;
	}
	.hint-texts{
		color: rgb(104, 104, 104);
		font-size: 0.75em;
		clear: both;
		padding: 0.5em 0;
	}
	#result_text_content a{
		float:left;
	}
	#result_table_content table{
		clear: both;
		width:100%;
	}
	.cancer_th{
		color: white;
		background-color: #003d79;
		border-right: 0.375em solid white;
		border-top: 0.375em solid white;
	}
	.cancer_td {
		background-color: #e9eaf5;
		border-right: 0.375em solid white;
		border-top: 0.375em solid white;
	}
	#cancer_predict_result_block{
		display:block;
		font-size: 0.825em;
	}
</style>