Skip to content

Instantly share code, notes, and snippets.

@jerzabek

jerzabek/heart nn

Created January 17, 2019 19:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jerzabek/d2b51d89ce075ea1503c6f54358f3be4 to your computer and use it in GitHub Desktop.
Save jerzabek/d2b51d89ce075ea1503c6f54358f3be4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
heart nn
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="authors" content="Nino Nogić, Ivan Jeržabek, Alberto Kerim">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The goal of the webpage is to approximately calculate the presence of Hearth Disease in human">
<link rel="icon" href="Pictures/favicon.png">
<link rel="stylesheet" href="css/izgled.css"> <!-- Main CSS -->
<link rel="stylesheet" href="css/heartnn.css"> <!-- CSS for input form -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- jQuery CDN used to send and retrieve data -->
<title>Cardios</title>
</head>
<body>
<nav>
<ul class="navigation">
<!-- Navigation for desktop PC -->
<a href="index.php" title="Main page">
<li>
<h2>Programs</h2>
<p>Welcome</p>
</li>
</a>
<a href="about-us.html" title="Something more about creators">
<li style="border-right: 5px solid #666;">
<h2>About Us</h2>
<p>Who are we</p>
</li>
</a>
<a href="registration.php" title="Registrate to start using our services">
<li style="float: right">
<h2>Registration</h2>
<p>Start now</p>
</li>
</a>
<a href="log-in.php" title="Log in to start">
<li style="float: right">
<h2>Log in</h2>
<p>Full access</p>
</li>
</a>
</ul>
<div class="topnav">
<!-- Navigation for mobile devices -->
<a href="#home" class="active">Menu</a>
<div id="myLinks">
<a href="index.php">Programs</a>
<a href="about-us.html">About us</a>
<a href="#"></a>
<a href="log-in.php">Log In</a>
<a href="registration.php">Registration</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()" style="position: absolute; left: 82%;">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- Script for mobile devices (NAV) -->
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</nav>
<br>
<h1 class="title-top">
Hi again. With this program I can help you calculate risk of heart desiese that can occur.
But I need some data from you.
</h1>
<br>
<div class="container">
<!-- Form for calculating risk -->
<form class="well form-horizontal" action="index.html" method="POST" id="info_form">
<fieldset>
<!-- Legend -->
<legend>Hi. For calculation please provide required data</legend>
<!-- Age -->
<div class="form-group">
<label class="col-md-4 control-label">Age</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="age" placeholder="In years" class="form-control" type="text">
</div>
</div>
</div>
<!-- Sex -->
<div class="form-group">
<label class="col-md-4 control-label">Sex</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="sex" class="form-control selectpicker">
<option value="Nan">Please select gender</option>
<option value="1">Male</option>
<option value="0">Female</option>
</select>
</div>
</div>
</div>
<!-- Type od pain -->
<div class="form-group">
<label class="col-md-4 control-label">Chest pain</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="cp" class="form-control selectpicker">
<option value="NaN">Please select type of pain</option>
<option value="1">Typical angina</option>
<option value="2">Atypical angina</option>
<option value="3">Non-anginal pain</option>
<option value="4">Asymptomatic pain</option>
</select>
</div>
</div>
</div>
<!-- Resting blood pressure -->
<div class="form-group">
<label class="col-md-4 control-label">Resting blood pressure</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="trestbps" placeholder="In mm Hg on admission" class="form-control" type="text">
</div>
</div>
</div>
<!-- Serum cholestoral -->
<div class="form-group">
<label class="col-md-4 control-label">Serum cholestoral</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="chol" placeholder="In mg/dl" class="form-control" type="text">
</div>
</div>
</div>
<!-- Fasting blood sugar -->
<div class="form-group">
<label class="col-md-4 control-label">Fasting blood sugar</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="fbs" class="form-control selectpicker">
<option value="Nan">Please select result</option>
<option value="1">Over 120 mg/dl</option>
<option value="0">Less than 120 mg/dl</option>
</select>
</div>
</div>
</div>
<!-- Resting electrocardiographic results -->
<div class="form-group">
<label class="col-md-4 control-label">Resting electrocardiographic results</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="restecg" class="form-control selectpicker">
<option value="Nan">Please select result</option>
<option value="0">Normal</option>
<option value="1">Having ST-T wave abnormality</option>
<option value="2">Showing probable or definite left ventricular hypertrophy by Estes' criteria </option>
</select>
</div>
</div>
</div>
<!-- Maximum heart rate achieved -->
<div class="form-group">
<label class="col-md-4 control-label">Maximum heart rate achieved</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="thalach" placeholder="In bpm" class="form-control" type="text">
</div>
</div>
</div>
<!-- Excercise induced angina -->
<div class="form-group">
<label class="col-md-4 control-label">Excercise induced angina</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="exang" class="form-control selectpicker">
<option value="Nan">Please select result</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
</div>
<!-- ST depression induced by exercise relative to rest -->
<div class="form-group">
<label class="col-md-4 control-label">ST depression induced by exercise relative to rest</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input type="text" class="form-control" name="oldpeak" placeholder="In mm"></textarea>
</div>
</div>
</div>
<!-- The slope of the peak exercise ST segment -->
<div class="form-group">
<label class="col-md-4 control-label">The slope of the peak exercise ST segment</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="slope" class="form-control selectpicker">
<option value="Nan">Please select result</option>
<option value="1">Upsloping</option>
<option value="2">Flat</option>
<option value="3">Downsloping</option>
</select>
</div>
</div>
</div>
<!-- Number of major vessels (0-3) colored by flourosop -->
<div class="form-group">
<label class="col-md-4 control-label">Number of major vessels (0-3) colored by flourosop</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="ca" class="form-control selectpicker">
<option value="Nan">Please select result</option>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</div>
<!-- Thalssemia -->
<div class="form-group">
<label class="col-md-4 control-label">Thalssemia</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="thal" class="form-control selectpicker">
<option value="Nan">Please select result</option>
<option value="3">Normal</option>
<option value="6">Fixed defect</option>
<option value="7">Reversable defect</option>
</select>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<!-- This script handles form submitting -->
<script>
$("#info_form").submit(function(event){
event.preventDefault()
url = "http://ninos.hopto.org:5000/Website?"
for(var i = 1; i <= 13; i++) {
url += event.target[i].name + "=" + event.target[i].value + ((i == 13 ? "" : "&"))
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// document.getElementById("txtHint").innerHTML = this.responseText;
window.location.replace("/Website/result.html?res=" + this.responseText);
console.log(this.responseText)
}
};
xhttp.open("GET", url, true);
xhttp.send();
});
</script>
</body>
</html>
@AlbertoKerim
Copy link

Outstanding move

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment