.btn-style{ | |||||
min-width: 150px; | |||||
margin-right: 10px; | |||||
margin-top: 20px; | |||||
} | |||||
body{ | |||||
padding-top: 70px; | |||||
} | |||||
.menu { | |||||
position: absolute; | |||||
top: 0px; | |||||
left: 0px; | |||||
width: 100%; | |||||
height: 30px; | |||||
padding: 10px; | |||||
color: white; | |||||
background-color: black; | |||||
} | |||||
.img-center{ | |||||
margin-top: 30px; | |||||
margin-left: auto; | |||||
margin-right: auto; | |||||
} | |||||
<!DOCTYPE html> | |||||
<html> | |||||
<head> | |||||
<meta charset="utf-8" /> | |||||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |||||
<title></title> | |||||
<!--css--> | |||||
<link rel="stylesheet" href="css/mobile.css"> | |||||
<link rel="stylesheet" href="../../lib/bootstrap.min.css"> | |||||
</head> | |||||
<body> | |||||
<div id="navigation"></div> | |||||
<div class="container"> | |||||
<div id="content"></div> | |||||
</div> | |||||
<!--scripts--> | |||||
<script src="../../lib//jquery-2.2.4.min.js"></script> | |||||
<script src="../../lib/es6-shim.min.js"></script> | |||||
<script src="../../lib/bootstrap.min.js"></script> | |||||
<script src="scripts/app.js"></script> | |||||
<script src="scripts/landung.js"></script> | |||||
</body> | |||||
</html> |
function loadTemplates() { $('#navigation').load('templates/NavbarTemplate.html'); | |||||
$('#content').load('templates/AboutTemplate.html'); | |||||
} $(document).ready(loadTemplates); |
function simulation() { | |||||
var v; | |||||
var s; | |||||
var fuel; | |||||
var schub = false; | |||||
setStartValues(50000, -1000, 10000); | |||||
function switchon() { | |||||
schub = true; | |||||
update(); | |||||
checkGameOver(); | |||||
} | |||||
function switchoff() { | |||||
schub = false; | |||||
update(); | |||||
checkGameOver(); | |||||
} | |||||
function a() { | |||||
if (schub == false || fuel <= 0) | |||||
return -1.63; | |||||
else { | |||||
fuel = fuel - 100; | |||||
return -1.63 + 12; | |||||
} | |||||
} | |||||
function showValues() { | |||||
$("#height").html("Höhe: " + s + " m"); | |||||
$("#speed").html("Geschwindigkeit: " + v + " m/s"); | |||||
$("#fuel").html("Teibstoffvorrat: " + fuel + " l"); | |||||
} | |||||
function update() { | |||||
v = v + a(); | |||||
s = s + v; | |||||
showValues(); | |||||
} | |||||
function checkGameOver() { | |||||
if (s <= 0) { | |||||
if (v < -10) | |||||
alert("Fehlschlag"); | |||||
else | |||||
alert("Erfolgreich"); | |||||
setStartValues(50000, -1000, 10000); | |||||
showValues(); | |||||
} | |||||
} | |||||
function setStartValues(height, velocity, Newfuel) { | |||||
v = velocity; | |||||
s = height; | |||||
fuel = Newfuel; | |||||
} | |||||
$('#content').html("<h2>Mondlandung</h2>"); | |||||
$("#content").append("<div class='menu'>Hauptmenü</div>") | |||||
$("#content").append("<div id='height'>Höhe: </div>"); | |||||
$("#content").append("<div id='speed'>Geschwindikgiet: </div>"); | |||||
$("#content").append("<div id='fuel'>Treibstoffvorrat: </div>"); | |||||
$("#content").append("<button id='energy' class='btn-style'>Triebwerk an</button>"); | |||||
$("#content").append("<button id='no-energy' class='btn-style'>Triebwerk aus</button>"); | |||||
$("#energy").click(switchon); | |||||
$("#no-energy").click(switchoff); | |||||
showValues(); | |||||
} | |||||
<div class="row"> | |||||
<h2 class="col-xs-12 page-header"> | |||||
Patientenverwaltung | |||||
<small>Ein Demoprojekt</small> | |||||
</h2> | |||||
</div> | |||||
<div class="row"> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/html5.png" alt="HTML5 LOGO" /> | |||||
<h4>HTML5</h4> | |||||
<p>Strukturierte Inhalte für den Browser</p> | |||||
</div> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/css3.png" alt="CSS3 LOGO" /> | |||||
<h4>CSS3</h4> | |||||
<p>Flexibles Design und Layout</p> | |||||
</div> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/bootstrap.png" alt="Bootstrap" /> | |||||
<h4>Bootstrap3</h4> | |||||
<p>Responsive und schick</p> | |||||
</div> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/jQuery.png" alt="JQuery LOGO" /> | |||||
<h4>JQuery</h4> | |||||
<p>Zugriff auf das DOM</p> | |||||
</div> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/react.png" alt="REACT LOGO" /> | |||||
<h4>REACT</h4> | |||||
<p>Building User Interfaces</p> | |||||
</div> | |||||
<div class="col-lg-4 col-sm-6 col-xs-12 text-center"> | |||||
<img class="img-circle img-responsive img-center" | |||||
src="img/js.png" alt="JavaScript" /> | |||||
<h4>JavaScript</h4> | |||||
<p>Die Programmiersprache im Browser</p> | |||||
</div> | |||||
</div> |
| |||||
<nav class="navbar navbar-inverse navbar-fixed-top"> | |||||
<div class="container"> | |||||
<div class="navbar-header"> | |||||
<span class="navbar-brand"> | |||||
Patientenverwaltung | |||||
</span> | |||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu"> | |||||
<span class="sr-only">Toggle navigation</span> | |||||
<span class="icon-bar"></span> | |||||
<span class="icon-bar"></span> | |||||
<span class="icon-bar"></span> | |||||
</button> | |||||
</div> | |||||
<div id="menu" class="collapse navbar-collapse"> | |||||
<ul class="nav navbar-nav"> | |||||
<li><a href="#" onclick="simulation()">Mondladnung</a></li> | |||||
<li><a href="#" onclick="$('#content').load('templates/AboutTemplate.html')">Info</a></li> | |||||
</ul> | |||||
</div> | |||||
</div> | |||||
</nav> |