-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
110 lines (109 loc) · 4.55 KB
/
index.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>herd immunity indirect protection vaccination demo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="title" content="herd immunity indirect protection vaccination demo" />
<meta name="description" content="herd immunity indirect protection vaccination demo" />
<meta name="keywords" content="vaccination, pertussis, infection model, measles, herd immunity" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="slider/css/slider.css" />
<style>
body {max-width: 480px; padding: 0 1em 0 1em; margin: 0 auto 0 auto;}
#frame {text-align: center; padding: 1em 0 0 0; margin: 0;}
#logo {display: none;}
#control {padding: 0 0 1em 0; margin: 0 0 0 0;}
#anno {padding: 0 0 0 0; margin: 0 0 0 0;}
#anno1 {cursor: pointer; float: left; font-size: 2em; color: #60a917; font-weight: bold; padding: 0 0 0 0; margin: 0 0 0 0;}
#anno2 {cursor: pointer; float: left; font-size: 2em; color: #60a917; font-weight: bold; padding: 0 0 0 1em; margin: 0 0 0 0;}
#about {text-align: right; cursor: pointer; padding: 0 0 0 0; margin: 0 0 0 0;}
#fimmune {float: left; margin: 0; padding: 0; width: 33%;}
#aimmune {cursor: pointer; font-weight: bold; font-size: 1.0em; margin: 0; padding: 0.1em 0 0.1em 0; color: #0050ef}
#timmune {margin: 0; padding: 0; height: 0; background: #eeeeee}
#bimmune {margin: 0; padding: 0; height: 0; background: #0050ef}
#nimmune {font-weight: bold; font-size: 2.0em; margin: 0; padding: 0.5em 0 0.5em 0; color: #0050ef}
#finfect {float: left; margin: 0 0 0 1px; padding: 0; width: 33%;}
#hi {cursor: pointer; padding: 1em 0 0 0; display: none;}
#ainfect {cursor: pointer; font-weight: bold; font-size: 1.0em; margin: 0; padding: 0.1em 0 0.1em 0; color: #60a917}
#tinfect {margin: 0; padding: 0; height: 0; background: #eeeeee}
#binfect {margin: 0; padding: 0; height: 0; background: #60a917}
#ninfect {font-weight: bold; font-size: 2.0em; margin: 0; padding: 0.5em 0 0.5em 0; color: #60a917}
#fprotect {float: left; margin: 0 0 0 1px; padding: 0; width: 33%;}
#aprotect {cursor: pointer; font-weight: bold; font-size: 1.0em; margin: 0; padding: 0.1em 0 0.1em 0; color: #d028c4}
#tprotect {margin: 0; padding: 0; height: 0; background: #eeeeee}
#bprotect {margin: 0; padding: 0; height: 0; background: #d028c4}
#nprotect {font-weight: bold; font-size: 2.0em; margin: 0; padding: 0.5em 0 0.5em 0; color: #d028c4}
#vframe {padding: 2.0em 0em 0em 0em; margin: 0;}
#vslider {width: 270px; }
#vslider2 .slider-handle {background: #0050ef;}
#dframe {padding: 1.5em 0em 0em 0em; margin: 0;}
#dslider {width: 270px; }
#dslider2 .slider-handle {background: #60a917;}
#xframe {padding: 1.5em 0em 0em 0em; margin: 0;}
#xslider {width: 270px; }
#xslider2 .slider-handle {background: #0050ef;}
</style>
<script type="text/javascript" src="jquery-ui-1.8.24/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="slider/js/bootstrap-slider.js"></script>
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript" src="protect.js"></script>
</head>
<body>
<div id="frame">
<div id="control">
<div id="anno">
<div id="anno1">
</div>
<div id="anno2">
</div>
<div id="about">
<span class="badge badge-important">?</span></div>
</div>
</div>
<div id="feedback">
<div id="fimmune">
<div id="aimmune">VACCINATED
</div>
<div id="timmune">
</div>
<div id="bimmune">
</div>
<div id="nimmune">
</div>
</div>
<div id="finfect">
<div id="ainfect">INFECTED
</div>
<div id="tinfect">
<img id="hi" src="face.png">
</div>
<div id="binfect">
</div>
<div id="ninfect">
</div>
</div>
<div id="fprotect">
<div id="aprotect">PROTECTED
</div>
<div id="tprotect">
</div>
<div id="bprotect">
</div>
<div id="nprotect">
</div>
</div>
</div>
<div id="vframe">
<input type="text" value="" data-slider-id="vslider2" id="vslider">
</div>
<div id="dframe">
<input type="text" value="" data-slider-id="dslider2" id="dslider">
</div>
</div>
<br><br><a href="https://medium.com/@op12no2/vaccination-is-a-social-responsibility-3406a66f6cd">vaccination is a social responsibility</a>
<br><a href="https://github.com/op12no2/protect">project on github</a>
</body>
</html>