-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
207 lines (202 loc) · 15.6 KB
/
index.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Who's News</title>
<!--Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/w3.css">
<!--Angular slider from https://github.com/angular-slider/angularjs-slider-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/5.4.0/rzslider.min.css">
<!--Fonts-->
<!--Google Fonts - Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type='text/css'>
<!-- Font AWESOME for icons https://fortawesome.github.io/Font-Awesome/-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel='shortcut icon' href='extension/NewsBias.png' type='image/x-icon' />
<!-- AngularJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="newsBias">
<!-- Navbar -->
<nav>
<ul class="w3-navbar navy w3-card-2 w3-top w3-left-align w3-large">
<li class="w3-hide-medium w3-hide-large w3-opennav w3-right"> <a class="w3-padding-large w3-hover-white w3-large navy" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a> </li>
<li>
<a href="#" class="navLogoContainer"><img class="navLogo" src="IMG/NewsBias.png" alt="News Bias Logo" /></a>
</li>
<li class="w3-hide-small"><a href="index.html" class="w3-padding-large w3-hover-white active-tab">Home</a></li>
<li class=" w3-hide-small w3-dropdown-hover"> <a href="factcheck.html" class="w3-padding-large w3-hover-white">Fact Check <i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4"> <a href="results.html">View all results</a> <a href="submit.html">Submit an article</a> <a href="apply.html">Apply to be a fact checker</a> </div>
</li>
<li class="w3-hide-small"><a href="about.html" class="w3-padding-large w3-hover-white">About</a></li>
<li class="w3-hide-small w3-right w3-dropdown-hover"><a class="w3-padding-large w3-hover-white" href="dashboard.html">My Dashboard <i class="fa fa-tachometer" aria-hidden="true"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4"> <a href="login.html">Login <i class="fa fa-sign-in" aria-hidden="true"></i></a> <a href="index.html">Logout <i class="fa fa-sign-out" aria-hidden="true"></i></a> </div>
</li>
</ul>
</nav>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:51px">
<ul class="w3-navbar w3-left-align w3-large navy">
<li> <a class="w3-padding-large" href="index.html">Home</a></li>
<li><a class="w3-padding-large" href="factcheck.html">Fact Check</a></li>
<li><a class="w3-padding-large" href="results.html">View all results</a></li>
<li><a class="w3-padding-large" href="submit.html">Submit an article</a></li>
<li><a class="w3-padding-large" href="apply.html">Apply to be a fact checker</a></li>
<li><a class="w3-padding-large" href="about.html">About</a></li>
<li><a class="w3-padding-large" href="dashboard.html">My Dashboard</a></li>
<li><a class="w3-padding-large" href="login.html">Login</a></li>
</ul>
</div>
<!-- Header -->
<div class="w3-container navy w3-center w3-padding-64 headerImage">
<h1 class="w3-jumbo">Who owns your news?</h1>
<p class="w3-margin w3-xlarge">Search for the name of a news website or enter a news article link.</p>
<form name="searchInput" ng-submit="searchURL('myNewsURL', searchInput.$valid);" novalidate>
<input class="w3-padding-16 w3-large w3-margin-top w3-input" type="text" ng-model="newsQuery" id="myNewsURL" placeHolder="Type the name of a news website or copy and paste a link to a news article." ng-minlength="3" required>
<!-- SUBMIT BUTTON -->
<button type="submit" class="w3-btn w3-padding-xlarge w3-large w3-margin-top w3-card w3-round-medium" ng-disabled="searchInput.$invalid" ng-class="{ 'w3-lime': searchInput.$valid }">Search</button>
</form>
</div>
<!-- The Modal -->
<div id="searchResultsModal" class="w3-modal">
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-container"> <span onclick="document.getElementById('searchResultsModal').style.display='none'" class="w3-closebtn">×</span>
<div class="w3-row-padding w3-padding-24 w3-container">
<div class="w3-content" ng-show="searchResult && newsQuery">
<div class="w3-row">
<h1 id="searchResultScroll" class="text-navy">Search Results</h1>
<p ng-hide="(urlToFilter | filter:searchQuery).length === 0">Your search for "<span class="searchTerm"></span>" returned the following titles</p>
<p ng-show="(urlToFilter | filter:searchQuery).length === 0">Your search for "<span class="searchTerm"></span>" returned no results. <a onclick="document.getElementById('searchResultsModal').style.display='none'" style="text-decoration: underline">Try and search again.</a></p>
</div>
<!--repeats urlToFilter data and filters by searchQuery after it's been cleaned -->
<div ng-repeat="news in urlToFilter | filter:({ search: searchQuery} ) track by $index">
<!--<div ng-repeat="news in urlToFilter | filter: filterByNameOrURL track by $index">-->
<hr>
<div class="w3-row">
<div class="w3-col w3-half w3-padding-right">
<h2 class="w3-text-cyan" style="margin-top: 0">{{news.name}}</h2>
<p class="text-navy w3-margin-bottom">URL: <a target="_blank" ng-href="{{news.url}}">{{news.url}}</a> </p>
<p class="text-navy w3-margin-bottom">{{news.name}} is owned by <span style="font-weight:bold" class="w3-text-cyan">{{news.owner}}</span>.</p>
<div class="w3-margin-bottom searchResult">
<p ng-repeat="i in news.people">{{i}}</p>
</div>
<p class="text-navy w3-margin-bottom">{{news.owner}} is a <span style="font-weight:bold" class="w3-text-cyan">{{news.type}}</span> based in <span style="font-weight:bold" class="w3-text-cyan">{{news.based}}</span>.</p>
<p ng-hide="!news.otherNews" class="text-navy" style="font-weight:bold">Other newspapers owned by {{news.owner}}: </p>
<ul class="w3-margin-bottom searchResult">
<li ng-hide="!news.otherNews" ng-repeat="i in news.otherNews"><a ng-href="{{news.otherOnline[$index]}}" target="_blank">{{i}}</a></li>
</ul>
</div>
<div class="w3-col w3-half w3-border w3-padding">
<h3 class="w3-text-cyan">Trust rating</h3>
<h4>{{news.name}}: <span class="w3-text-cyan">{{news.averageRating}}/5</span></h4>
<p class="w3-margin-bottom">Rating is an average of <span class="w3-text-cyan intro">{{news.totalVotes}}</span> total votes from visitors to this site.</p>
<h5>Submit your vote for {{news.name}}</h5>
<p class="w3-margin-bottom">Rate how much you trust this news site by dragging the slider between 1 and 5.</p>
<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" id="myVote"></rzslider>
<input class="w3-btn-block margin-top-60 w3-round w3-lime" type="submit" name="submit" data-ng-click="biasVote($index);" value="Submit Vote" ng-class="{'w3-disabled' : submitVote == true}" /> </div>
</div>
</div>
<hr>
<h2 ng-hide="(urlToFilter | filter:searchQuery).length === 0" class="text-navy w3-margin-bottom">Related results: </h2>
<div ng-repeat="news in urlToFilter | filter:searchQuery track by $index">
<div class="w3-accordion w3-margin-tiny">
<button ng-click="accordian(news.name)" class="w3-btn-block w3-left-align w3-light-grey"> {{news.name}} </button>
<div id="{{news.name}}" class="w3-accordion-content w3-container w3-margin-top">
<div class="w3-row">
<div class="w3-col w3-half w3-padding-right">
<p class="text-navy w3-margin-bottom">URL: <a target="_blank" ng-href="{{news.url}}">{{news.url}}</a> </p>
<p class="text-navy w3-margin-bottom">{{news.name}} is owned by <span style="font-weight:bold" class="w3-text-cyan">{{news.owner}}</span>.</p>
<p class="text-navy">CEO: {{news.CEO}}</p>
<p class="text-navy w3-margin-bottom">Chairman: {{news.Chairman}}</p>
<p class="text-navy w3-margin-bottom">{{news.owner}} is a <span style="font-weight:bold" class="w3-text-cyan">{{news.type}}</span> based in <span style="font-weight:bold" class="w3-text-cyan">{{news.based}}</span>.</p>
<p class="text-navy" style="font-weight:bold">Other newspapers owned by {{news.owner}}: </p>
<ul class="w3-margin-bottom searchResult">
<li ng-repeat="i in news.otherNews"><a target="_blank" ng-href="{{news.otherOnline[$index]}}">{{i}}</a></li>
</ul>
</div>
<div class="w3-col w3-half w3-border w3-padding">
<div ng-show="{{ news.bias }} == true">
<h3 class="w3-text-cyan">Trust rating</h3>
<h4>{{news.name}}: <span class="w3-text-cyan">{{news.averageRating}}/5</span></h4>
<p class="w3-margin-bottom">Rating is an average of <span class="w3-text-cyan intro">{{news.totalVotes}}</span> total votes from visitors to this site.</p>
<h5>Submit your vote for {{news.name}}</h5>
<p class="w3-margin-bottom">Rate how much you trust this news site by dragging the slider between 1 and 5.</p>
<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" id="myVote"></rzslider>
<input class="w3-btn-block margin-top-60 w3-round w3-lime" type="submit" name="submit" data-ng-click="biasVote($index);" value="Submit Vote" ng-class="{'w3-disabled' : submitVote == true}" /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Grey Grid -->
<div class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
<div class="w3-content text-navy">
<h2>How to use this site</h2>
<div class="w3-row">
<div class="w3-col w3-half w3-padding-right">
<h3>Search</h3>
<p class="w3-margin-bottom">Search for an Australian newspaper (online or in print) using the search box on the <a href="index.html">home page</a>. You can search for a name (e.g. Brisbane Times) or copy and paste a url of an article.</p>
<p class="w3-margin-bottom">Can't find the newspaper you're looking for? Our database currently only includes major Australian newspapers but we're adding to it regularly.</p>
</div>
<div class="w3-col w3-half">
<h3>Fact Check</h3>
<p class="w3-margin-bottom">Who's News Fact Check allows you to submit an article to be checked and assessed by our team of community leaders.</p>
<p class="w3-margin-bottom">Articles will be given a rating based on four weighted criteria which are independantly assessed by three members of the fact-checking team. </p>
<p class="w3-margin-bottom">Results will be given a grade (A to F) based on an average of the three fact checker ratings. Find something interesting? Share the results of a fact check with your friends. </p>
</div>
</div>
<div class="columns">
<h3 class="columnHeader">Current list of newspapers</h3>
<ul ng-repeat="news in newsSites" class="searchResult">
<li>{{news.name}}</li>
</ul>
<p class="w3-medium columnHeader w3-margin-top">Our database was last updated 30/10/2016</p>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-center navy">
<p>Copyright 2016 Team News Bias</p>
<p class="w3-small">Header image by Esther Vargas from <a href="https://www.flickr.com/photos/esthervargasc/14209650919/">Flickr</a></p>
</footer>
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
}
else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
<!--close modal from clicking anywhere from w3.css -->
<script>
// Get the modal
var modal = document.getElementById('searchResultsModal');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<!--controllers -->
<script src="js/controller.js"></script>
<!--Angular slider from https://github.com/angular-slider/angularjs-slider-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/5.4.0/rzslider.min.js"></script>
</body>
</html>