-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhome.html
108 lines (82 loc) · 5.38 KB
/
home.html
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
<!DOCTYPE HTML>
<html lang = "en" style = "height: auto; overflow: visible;">
<head>
<title>Wellness Forecast</title>
<link rel = "stylesheet" href="style1.css">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.localscroll.js" type="text/javascript"></script>
<script src="jquery.scrollTo.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#nav').localScroll({duration:800});
});
</script>
<nav class="list">
<div id="pages">
<a href = "home.html" class="nav-item"> Home </a>
<a href="wellness.htm" class="nav-item">Wellness Forecast</a>
<a href="#details" >About</a>
</div>
</nav>
<div class = "parallaxmaboi">
<div id="particles-js">
<div class="particleText">
<div class="particleText-text">
<div class = "paratext"><h1 style="font-family:sans-serif;" class="title">Wellness Forecast</h1></div>
<p class="resize">Create wellness today, watch it unfold tomorrow</p>
</div>
</div>
</div>
<div class="first" id="first">
<div class ="welltitle"><h1 align="center" id = "details">Wellness <span style="color: currentColor">Forecast</span></h1></div>
<div class="cntnt">
<div class = "yolo"><p align="justify" >Wellness forecast is an insightful tool that pictorially depicts world wellness on a heat map. It can help governments determine how changes on different scales in the country will affect the overall wellness index in the future.</p></div>
<br><br>
<p>It uses machine learning to analyse large volumes of data, and finds the best fitting pattern that can be used to predict the future wellness based on the current statistics. The following features are taken into consideration for the predictions:</p>
<ol>
<li> Access to electricity </li>
<li> Crude Birth Rate </li>
<li> Death Rate </li>
<li> Female Population Ratio </li>
<li> Food scarcity </li>
<li> Infant mortality rate </li>
<li> Life expectancy </li>
</ol>
</div>
</div>
<div class="footer">
<p align = "center">Website made for NUS HacknRoll</p>
</div>
<div class="particle-over">
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
particlesJS.load('particles-js',
function(){
console.log('')
})
particlesJS("particles-js", {"particles":{"number":{"value":60,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#fff"},"polygon":{"nb_sides":6},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.45,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.2,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":35,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.3,"width":1},"move":{"enable":true,"speed":3,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats=new Stats; stats.setMode(0); stats.domElement.style.position='absolute'; stats.domElement.style.left='0px'; stats.domElement.style.top='0px'; document.body.appendChild(stats.domElement); count_particles=document.querySelector('.js-count-particles'); update=function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText=window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
function myFunction() {
var x=document.getElementById("Topnav");
if (x.className === "nav") {
x.className += " responsive";
} else {
x.className="nav";
}
}
$.fn.scrollView=function () {
return this.each(function () {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
});
}
$('#first').scrollView();
</script>
</div>
</div>
</body>
</html>