Skip to content
GitLab
Commit 4b65a0e7 authored by Shaik Shaziya's avatar Shaik Shaziya
Browse files

complete project added

parent 55d53247
Hide whitespace changes
Inline Side-by-side
final project/2.css 0 → 100644
View file @ 4b65a0e7
html, body {
height: 100%;
}
.topnav {
overflow: hidden;
background-color:lavender;
}
.topnav a {
float: left;
color: maroon;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px ;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(236, 122, 198);
color: lightgreen;
}
.topnav a.active{
background:color: powderblue;
color: white;
}
body {
margin: 0px;
background-color:lightgreen;
}
\ No newline at end of file
final project/game1.html 0 → 100644
View file @ 4b65a0e7
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
html, body {
width: 100%;
height:100%;
}
body {
background: linear-gradient(-45deg, red, green, yellow, violet);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
.topnav {
overflow: hidden;
background-color:lavender;
}
.topnav a {
float: left;
color: maroon;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px ;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: rgb(236, 122, 198);
color: lightgreen;
}
.topnav a.active{
background:color: powderblue;
color: white;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.button {
background-color: #4CAF50;
border: black solid 2px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}
.flex-container {
display: flex;
flex-direction: column;
}
.flex-container > div {
background-color: #f1f1ff;
margin: 10px;
padding: 20px;
font-size: 30px;
border:black solid 2px;
text-align:center;
}
</style>
<script>
var a;
function prog(a)
{
var b=document.getElementById('strength').style.width;
var c;
if(b=="100%")
c=100;
else if(b=="80%")
c=80;
else if(b=="60%")
c=60;
else if(b=="40%")
c=40;
else if(b=="20%")
c=20;
else if(b=="0%")
c=0;
var count=c/20;
count=count+a;
if(count==5)
{
document.getElementById('image').innerHTML='<img class="well" src="immune boy.jpg" class="img-rounded" alt="Cinque Terre" style="width:250px;height:250px;border:2px solid black">';
}
else
{
document.getElementById('image').innerHTML='<img class="well" src="imuneless.jpg" class="img-rounded" alt="Cinque Terre" style="width:250px;height:250px;border:2px solid black"><br>';
}
if(count==0)
{
document.getElementById('strength').style.width="0%";
var x=document.getElementById('strength').innerText="0%";
}
else if(count==1)
{
document.getElementById('strength').style.width="20%";
var x=document.getElementById('strength').innerText="20%";
}
else if(count==2)
{
document.getElementById('strength').style.width="40%";
var x=document.getElementById('strength').innerText="40%";
}
else if(count==3)
{
document.getElementById('strength').style.width="60%";
var x=document.getElementById('strength').innerText="60%";
}
else if(count==4)
{
document.getElementById('strength').style.width="80%";
var x=document.getElementById('strength').innerText="80%";
}
else if(count==5)
{
document.getElementById('strength').style.width="100%";
var x=document.getElementById('strength').innerText="100%";
document.getElementById('replay').style.display="inline";
}
}
function appear()
{
document.getElementById('game_instructions').style.display="none";
document.getElementById('game_page').style.display="inline-block";
document.getElementById('back').style.display="inline";
}
function rep()
{
prog(-5);
document.getElementById('replay').style.display="none";
}
function start()
{
document.getElementById('game_instructions').style.display="inline";
document.getElementById('game_page').style.display="none";
var b=document.getElementById('strength').style.width;
var c;
if(b=="100%")
c=100;
else if(b=="80%")
c=80;
else if(b=="60%")
c=60;
else if(b=="40%")
c=40;
else if(b=="20%")
c=20;
else if(b=="0%")
c=0;
var count=c/20;
prog(-cou);
}
</script>
</head>
<body>
<center>
<h1 align=center><font color="darkred" size="6" face="algerian">WHY DO WE FALL ILL</font></h1>
<hr color="darkred" size="6" width="1400">
</center>
<div class="topnav"><a href="homepage.html">Home</a>
<a href="principles.html">Priciples Of Prevention&Treatment</a>
<a href="prevention.html">Prevntion Of Diseases</a>
<a href="game1.html">Game</a>
<a href="project ill.html">Vaccination</a>
<a href="summaryhealth.html">Summary</a>
</div>
<br>
<br>
<div id="game_instructions">
<br><br>
<div class="flex-container">
<div style="align:center" ><p><h1 align="center"><b style="color:red"><u>Instructions:</u></b></h1><br>
<h2 align="left"><b style="color:green">1. Select the images that will increase the immunity and help the person to become healthy.<br>2. Initially he was Ill. You have to help him by selecting the images that he should do.<br>3. If you select an image that decreases his immunity, his immunity power decreases by 20%.<br>4. If you select an image that increases his immunity, his immunity power increases by 20%.<br>5.Help him to regain his Immunity power.</b><h2></p>
</div></div><br><br>
<div style="text-align:center">
<button class="button" onclick="appear()" >Start</button>
</div>
</div>
<div id="game_page" style="display:none">
<div class="container">
<div class="row"><br><br><br><br><br></div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<button class="btn btn-default" onclick="prog(-1)" style="border:2px solid black">
<img src="a.jpg" class="img-rounded" style="align:center" alt="Cinque Terre" width="200" height="200"><br>
</button>
<button class="btn btn-default" onclick="prog(1)" style="border:2px solid black">
<img src="b.jpg" class="img-rounded" alt="Cinque Terre" width="200" height="200"><br>
</button>
<button class="btn btn-default" onclick="prog(-1)" style="border:2px solid black">
<img src="virus.jpg" class="img-rounded" alt="Cinque Terre" width="200" height="200">
</button>
<button class="btn btn-default" onclick="prog(1)" style="border:2px solid black">
<img src="e.jpg" class="img-rounded" alt="Cinque Terre" width="200" height="200"><br>
</button>
</div>
<div class="col-sm-4" align="center">
<br><br><br><br>
<div id="image">
<img class="well" src="imuneless.jpg" class="img-rounded" alt="Cinque Terre" style="width:250px;height:250px;border:2px solid black">
</div>
<div class="progress" style="background-color:red" >
<div class="progress-bar bg-info" id="strength" role="progressbar"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:0%;border:2px solid black">0%
</div>
</div>
</div>
<div class="col-sm-4">
<button class="btn btn-default" onclick="prog(-1)" style="border:2px solid black">
<img src="f.jpg" class="img-rounded" style="align:center" alt="Cinque Terre" width="200" height="200"><br>
</button>
<button class="btn btn-default" onclick="prog(1)" style="border:2px solid black">
<img src="yog.jpg" class="img-rounded" alt="Cinque Terre" width="200" height="200"><br>
</button>
<button class="btn btn-default" onclick="prog(1)" style="border:2px solid black">
<img src="drink water.jpg" class="img-rounded" alt="Cinque Terre" width="200" height="200">
</button>
<button class="btn btn-default" onclick="prog(1)" style="border:2px solid black">
<img src="getsleep.jpg" class="img-rounded" style="align:center" alt="Cinque Terre" width="200" height="200"><br>
</button>
</div>
</div>
<div class="row text-center" >
<button id="replay" class="button" onclick="rep()" style="display:none">Replay</button>
</div>
<br>
<div class="row text-center">
<button id="back" class="button" style="text-align:left;display:none" onclick="start()">Back</button>
</div>
</div>
</div>
</div>
</body>
<div align="center"
<button style="font-size:30;">
<a href="project ill.html" class="button">Next</a>
</button>
</div>
<br>
<br>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment