357 lines
12 KiB
HTML
357 lines
12 KiB
HTML
|
<!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>Jubilee</title>
|
||
|
|
|
||
|
|
<link href="//cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css" rel="stylesheet" type="text/css"/>
|
||
|
|
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
|
|
<link href="//cdn.muicss.com/mui-0.9.38/css/mui.min.css" rel="stylesheet" type="text/css" />
|
||
|
|
<script src="//cdn.muicss.com/mui-0.9.38/js/mui.min.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!--
|
||
|
|
https://auth0.com/blog/introduction-to-progressive-apps-part-one/
|
||
|
|
https://github.com/unicodeveloper/pwa-commits
|
||
|
|
|
||
|
|
-->
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.viewport {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* encapsulate the various syntax in helper clases */
|
||
|
|
/* inspired by http://infrequently.org/2009/08/css-3-progress/ */
|
||
|
|
|
||
|
|
/* items flex/expand vertically */
|
||
|
|
.vbox {
|
||
|
|
/* previous syntax */
|
||
|
|
display: -webkit-box;
|
||
|
|
display: -moz-box;
|
||
|
|
display: box;
|
||
|
|
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-moz-box-orient: vertical;
|
||
|
|
-ms-box-orient: vertical;
|
||
|
|
box-orient: vertical;
|
||
|
|
|
||
|
|
/* current syntax */
|
||
|
|
display: -webkit-flex;
|
||
|
|
display: -moz-flex;
|
||
|
|
display: -ms-flex;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
-webkit-flex-direction: column;
|
||
|
|
-moz-flex-direction: column;
|
||
|
|
-ms-flex-direction: column;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gradient {
|
||
|
|
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
|
||
|
|
background: #ebf1f6; /* Old browsers */
|
||
|
|
background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6-15 */
|
||
|
|
background: -webkit-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* Chrome10-25,Safari5.1-6 */
|
||
|
|
background: linear-gradient(to bottom, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f6', endColorstr='#d5ebfb', GradientType=0); /* IE6-9 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.backgroundImage {
|
||
|
|
background-image: url(http://via.placeholder.com/411x823);
|
||
|
|
}
|
||
|
|
|
||
|
|
.appPanel {
|
||
|
|
/* previous syntax */
|
||
|
|
-webkit-box-flex: 1;
|
||
|
|
-moz-box-flex: 1;
|
||
|
|
-ms-box-flex: 1;
|
||
|
|
box-flex: 1;
|
||
|
|
|
||
|
|
/* current syntax */
|
||
|
|
-webkit-flex: 1;
|
||
|
|
-moz-flex: 1;
|
||
|
|
-ms-flex: 1;
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
height : 100vh;
|
||
|
|
width : 100vw;
|
||
|
|
|
||
|
|
overflow-y: auto;
|
||
|
|
/* background-color: white;*/
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-id~="main"] {
|
||
|
|
z-index: 0;
|
||
|
|
position: absolute;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-id~="news"] {
|
||
|
|
z-index: 1000;
|
||
|
|
position: absolute;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
<!-- end of new stuff -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
#connectionStatus {
|
||
|
|
margin-top:15px;
|
||
|
|
margin-bottom:15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.stop-scrolling {
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fullscreen {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 5000;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
background-color: mui-color('grey','300');
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center top;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fillpanel {
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
background-color: mui-color('amber', '50');
|
||
|
|
}
|
||
|
|
|
||
|
|
.fullscreen .header {
|
||
|
|
/*position: fixed;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: +1;
|
||
|
|
transition: left 0.2s;*/
|
||
|
|
|
||
|
|
position:fixed;
|
||
|
|
width:100vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: column;
|
||
|
|
height:100%;
|
||
|
|
// overflow:auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box .headerSpacer {
|
||
|
|
flex: 0 1 66px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box .content {
|
||
|
|
flex: 1 1 auto;
|
||
|
|
background-color: mui-color('white');
|
||
|
|
overflow: auto;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.newsarticle img {
|
||
|
|
max-height:100%;
|
||
|
|
max-width:100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tiny {
|
||
|
|
font-size:1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small {
|
||
|
|
font-size:2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.medium {
|
||
|
|
font-size:4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.large {
|
||
|
|
font-size:6rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cardLink {
|
||
|
|
color: mui-color('blue', '500');
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.endbumper {
|
||
|
|
height:66px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.seemore {
|
||
|
|
font-size:14px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
#connectionStatus {
|
||
|
|
margin-top:15px;
|
||
|
|
margin-bottom:15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.trafficHeavy {
|
||
|
|
color: #fa4a50;
|
||
|
|
}
|
||
|
|
|
||
|
|
.trafficLight {
|
||
|
|
color: #fdbd15;
|
||
|
|
}
|
||
|
|
|
||
|
|
.trafficMedium {
|
||
|
|
color: #fba010;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body class="vbox viewport backgroundImage">
|
||
|
|
|
||
|
|
<div class="appPanel" data-id="main">
|
||
|
|
|
||
|
|
<div class="mui-container">
|
||
|
|
<div id="greet"></div>
|
||
|
|
|
||
|
|
<div id="location" class="mui-row" style="display: none;">Location</div>
|
||
|
|
</div>
|
||
|
|
<div class="mui-container" id="connectionStatus" style="display:;">
|
||
|
|
<div class="mui--text-center"><i class="large material-icons mui--align-middle mui--text-center" style="color:grey;">new_releases</i></div>
|
||
|
|
<div class="mui--text-body1 mui--text-center">No internet connection</div>
|
||
|
|
</div>
|
||
|
|
<div class="mui-container" id="viewFrame">
|
||
|
|
<div id="weatherAlertShell" class="mui-panel" style="display: ;">
|
||
|
|
<div id="weatherAlertTitle" class="mui--text-title cardTitle">Weather Alert</div>
|
||
|
|
<div id="weatherAlert"></div>
|
||
|
|
</div>
|
||
|
|
<div id="bymeShell" class="mui-panel" style="display: ;">
|
||
|
|
<div id="byMeTitle" class="mui--text-title cardTitle">By me</div>
|
||
|
|
<div id="byme"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="trafficShell" class="mui-panel" style="display: ;">
|
||
|
|
<div class="mui--text-title cardTitle">Traffic</div>
|
||
|
|
<div id="traffic"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="agendaShell" class="mui-panel" style="display: ;">
|
||
|
|
<div class="mui--text-title cardTitle">Upcoming events</div>
|
||
|
|
<div id="agenda"><br><br><br><br><br><br></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="nearbyShell" class="mui-panel" style="display: ;">
|
||
|
|
<div class="mui--text-title cardTitle">Around me</div>
|
||
|
|
<div id="nearby"><br><br><br><br><br><br></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="newsShell" class="mui-panel" style="display: ;">
|
||
|
|
<div class="mui--text-title cardTitle">Latest news</div>
|
||
|
|
<div id="news" class="scrolling-wrapper-flexbox"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="weatherShell" class="mui-panel" style="display: ;">
|
||
|
|
<div class="mui--text-title cardTitle">Weather</div>
|
||
|
|
<div id="weather"><br><br><br><br><br><br></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="appPanel" data-id="news">
|
||
|
|
<div id="card_newsP" class="fullscreen" style="top: 0px; left: 0px;">
|
||
|
|
<header class="header">
|
||
|
|
<div class="mui-appbar mui--appbar-line-height mui--z1" style="vertical-align:middle;">
|
||
|
|
<span>
|
||
|
|
<button class="mui-btn mui-btn--large mui-btn--primary mui-btn--flat closebutton" id="close_newsP">
|
||
|
|
<i class="medium material-icons mui--align-middle" style="color:black;">arrow_back</i>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
</span>
|
||
|
|
<span class="mui--text-title mui--align-middle" id="title_newsP">
|
||
|
|
News
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="endbumper"></div>
|
||
|
|
<div class="box">
|
||
|
|
|
||
|
|
<div class="content" id="newsP">
|
||
|
|
<div class="newsarticle">
|
||
|
|
<div><img src="https://image.silvrtree.co.uk/640,fit,q80/https://static.euronews.com/articles/3107088/1000x563_3107088.jpg"></div>
|
||
|
|
<div class="mui-container" style="margin-bottom: 50px;">
|
||
|
|
<div><h1>U.K. investigating Facebook response to alleged Cambridge Analytica data breach</h1></div>
|
||
|
|
<div>
|
||
|
|
<p>LONDON — The U.K.'s information and data privacy regulator is investigating whether Facebook responded "robustly" to reports that political data firm <a href="https://www.nbcnews.com/news/us-news/cambridge-analytica-harvested-data-millions-unsuspecting-facebook-users-n857591">Cambridge Analytica gained access to data</a> on 50 million of its users.</p>
|
||
|
|
<p>"We are looking at whether or not Facebook secured and safeguarded personal information on the platform and whether when they found out about the loss of the data, whether they acted robustly and whether or not people were informed," Information Commissioner Elizabeth Denham told the BBC on Tuesday morning.</p>
|
||
|
|
<p>Denham first demanded access to the data held by Cambridge Analytica on March 7, the Information Commissioner's Office said in a statement. The company didn't respond by the deadline given and on Monday evening Denham announced that the ICO is seeking a warrant for the information. She did not say when regulators had started looking into Facebook.</p>
|
||
|
|
<p></p><div class="widget">
|
||
|
|
<div class="widget__wrapper">
|
||
|
|
<amp-img src="https://static.euronews.com/articles/3107088/400x281_nbc-180320-cambridge-analytica-mc-1010_7ba67898875e5ee156ff5d42c55b257e.jpg" layout="responsive" height="180" width="320" alt="The offices of Cambridge Analytica in central London"></amp-img>
|
||
|
|
|
||
|
|
<span class="widget__captionText">The offices of Cambridge Analytica in central London</span>
|
||
|
|
<span class="widget__captionCredit">Henry Nicholls</span>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p></p>
|
||
|
|
<p>Facebook had started its own audit at Cambridge Analytica's London office, but halted it at the request of the Information Commissioners Office, the company said Monday. The ICO said that Facebook's search "would potentially compromise a regulatory investigation."</p>
|
||
|
|
<p><strong>Related:</strong> <a href="https://www.nbcnews.com/tech/social-media/facebook-suspends-cambridge-analytica-which-worked-trump-campaign-n857516">Facebook suspends Cambridge Analytica, which worked for Trump campaign</a></p>
|
||
|
|
<p>On Saturday, the New York Times and London's Observer reported that the firm harvested private information from more than 50 million Facebook users to influence voters during the 2016 election.</p>
|
||
|
|
<div class="clear"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<p>"We are looking at whether or not there was sufficient consent for individuals to be able to share their data with the application in the first place," Denham said.</p>
|
||
|
|
<p>The probes of the two companies are part of a larger investigation by the regulator into the use of personal data in political campaigns, Denham said.</p>
|
||
|
|
<p>The British government has called the allegations "very concerning."</p>
|
||
|
|
<p></p>
|
||
|
|
<p>"It is essential that people can have confidence that their personal data will be protected and used in an appropriate way," a spokesman for Prime Minister Theresa May said on Monday.</p>
|
||
|
|
<p>In the U.S., both Democrats and Republicans issued strong statements on Monday <a href="https://www.nbcnews.com/tech/social-media/facebook-under-fire-following-cambridge-analytica-expos-n858086">calling on Facebook</a> to make changes and questioning whether the company had grown too big, too fast.</p>
|
||
|
|
|
||
|
|
<div class="clear"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- end fullscreen-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<noscript>
|
||
|
|
<!-- anchor linking to external file -->
|
||
|
|
<h1>Javascript disabled</h1>
|
||
|
|
<p>This really requires javascript to work</p>
|
||
|
|
</noscript>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|