-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdetails.html
115 lines (105 loc) · 5.87 KB
/
details.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
109
110
111
112
113
114
115
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Details">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>TrendSetter Details</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<style>
#text {
margin-left: 50px;
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 30px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
</style>
</head>
<body>
<!-- Uses a header that scrolls with the text, rather than staying locked at the top -->
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">TrendSetter</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">TrendSetter</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="index.html">Home</a>
<a class="mdl-navigation__link" href="Articles/WorldMap/WorldMap.html">World Map</a>
<a class="mdl-navigation__link" href="Articles/Timeline/Timeline.html">Timeline</a>
<a class="mdl-navigation__link" href="CountryComparator.html">Country Comparator</a>
<a class="mdl-navigation__link" href="details.html">Details</a>
</nav>
</div>
<center><h2>Details</h2></center>
<button class="accordion">FAQ</button>
<div class="panel">
<p><b>What is this app?</b></p>
<p>This app helps you to know more about current affairs (in a nutshell).</p>
<p><b>Seriously, what is this app?</b></p>
<p>This app (TrendSetter) is a educational mobile app which aims to inform you about the latest and greatest issues our world is facing. We have developed this app as through our research we have found out that an important skill which would be valued in the workforce in the future is social awareness. Our app mainly comprises of articles about different current affairs issues and quizzes on these affairs. We have made this app mobile-friendly to appeal to our target audience, which are teenagers.</p>
<p><b>Why do you need to create such an app?</b></p>
<p>Firstly, this app is our submission for i.code 2017, a competition where teams comprising of three members develop an app which goes with the theme. Secondly, through our research, we have found out that teenagers nowadays need to be more aware of issues which the world faces in order to cope with the progressing and ever-changing world we live in. We believe that through this app we would entice teenagers to be interested in current affairs.</p>
<p><b>What articles do you have?</b></p>
<p>We have numerous articles based around the group it affects - local, regional and global. They range from conflicts in the Middle East to elections in the United Sates, so you can expect anything under the sun. However, do note that we are unable to cover every issue (our articles are written by people, not computer-generated).</p>
<p><b>I want to view these articles on my computer, not my phone.</b></p>
<p>Sure thing, just head to https://pipix51.github.io/TrendSetter/ (that should do the trick)</p>
<p><b>How do I contribute an article?</b></p>
<p>Send an email to the developers (email is shown below); either one should do the trick. We would review the article (we would not reject it unless it goes against our interests or is full of vulgarities) and publish it within a few working days (and we'll credit the article with your name - tell us if you do not want to do so).</p>
</div>
<button class="accordion">Administrators</button>
<div class="panel">
<p>This page is developed and managed by members of Dunman High School Junior High Infocomm Club (DHSJHICC); it is our entry for the i.code 2017 competition. For any specific inquiries, please direct them to the developers-</p>
<ul>
<li>Chen Chen, 3J (Design) chen.chen@dhs.sg</li>
<li>Kevan Wee, 3K (Content) wee.jiawei.kevan@dhs.sg</li>
<li>Koh Pi Rong, 3L (Code) koh.pirong@dhs.sg</li>
</ul>
<p>If you are interested in the development of the page, please do not hesitate to visit our GitHub repository at <a href="https://github.com/pipix51/TrendSetter">https://github.com/pipix51/TrendSetter</a>. (Please do drop a note before you contribute or submit any pull request)</p>
</div>
<button class="accordion">Quizzes</button>
<div class="panel">
<a href="https://pipix51.github.io/TrendSetter/Quizzes/ThisWeek31July.html">Quiz: This Week In News (31 July-6 Aug)</a>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
</script>
</body>
</html>