Skip to content

Commit

Permalink
feat(v2 backend): make public landing redirect to appropriate app sto…
Browse files Browse the repository at this point in the history 
…re. (#1977)

Co-authored-by: Bezhou Feng
  • Loading branch information
@rjhuijsman
rjhuijsman authored Apr 2, 2021
1 parent daef675 commit 78c43d4
Show file tree
Hide file tree
Showing 5 changed files with 318 additions and 98 deletions.
36 changes: 13 additions & 23 deletions server/public/404.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Page Not Found</title>

<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>404</h2>
<h1>Page Not Found</h1>
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
</div>
<script>
// Redirect to index.html.
window.location.pathname = "/";
</script>
<!-- Fallback in case JavaScript is disabled. -->
<h2>404</h2>
<h1>Page Not Found</h1>
<p>
The specified file was not found on this website. Please check the URL for
mistakes and try again.
</p>
</body>
</html>
46 changes: 46 additions & 0 deletions server/public/apple-app-store-badge-en.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added server/public/google-play-badge-en.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
160 changes: 85 additions & 75 deletions server/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,89 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>

<!-- update the version number as needed -->
<script defer src="/__/firebase/8.3.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/8.3.0/firebase-auth.js"></script>
<script defer src="/__/firebase/8.3.0/firebase-database.js"></script>
<script defer src="/__/firebase/8.3.0/firebase-firestore.js"></script>
<script defer src="/__/firebase/8.3.0/firebase-functions.js"></script>
<script defer src="/__/firebase/8.3.0/firebase-messaging.js"></script>
<script defer src="/__/firebase/8.3.0/firebase-storage.js"></script>
<script defer src="/__/firebase/8.3.0/firebase-analytics.js"></script>
<script defer src="/__/firebase/8.3.0/firebase-remote-config.js"></script>
<script defer src="/__/firebase/8.3.0/firebase-performance.js"></script>
<!--
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
<script defer src="/__/firebase/init.js?useEmulator=true"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WHO COVID-19 Updates</title>

<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
body {
background: #eceff1;
color: rgba(0, 0, 0, 0.87);
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 24px;
margin: 0;
padding: 0;
}
#message {
background: white;
max-width: 360px;
margin: 100px auto 16px;
padding: 32px 24px;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
#message p {
line-height: 140%;
margin: 16px 0 24px;
font-size: 14px;
}
#badges {
display: flex;
justify-content: center;
}
.badge {
height: 40px;
margin: 10px;
}
#logo {
width: 100%;
}
@media (max-width: 599px) {
body,
#message {
margin-top: 0;
background: white;
box-shadow: none;
}
body {
border-top: 16px solid #008ec9;
}
}
</style>
</head>
<body>
<div id="message">
<h2>Welcome</h2>
<h1>Firebase Hosting Setup Complete</h1>
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
</div>
<p id="load">Firebase SDK Loading&hellip;</p>

<script>
document.addEventListener('DOMContentLoaded', function() {
const loadEl = document.querySelector('#load');
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.firestore().doc('/foo/bar').get().then(() => { });
// firebase.functions().httpsCallable('yourFunction')().then(() => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
// firebase.analytics(); // call to activate
// firebase.analytics().logEvent('tutorial_completed');
// firebase.performance(); // call to activate
//
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
const GOOGLE_PLAY_STORE_LINK =
"https://play.google.com/store/apps/details?id=org.who.WHOMyHealth";
const APPLE_APP_STORE_LINK =
"https://apps.apple.com/app/id1503458183?mt=8";

try {
let app = firebase.app();
let features = [
'auth',
'database',
'firestore',
'functions',
'messaging',
'storage',
'analytics',
'remoteConfig',
'performance',
].filter(feature => typeof app[feature] === 'function');
loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
} catch (e) {
console.error(e);
loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
}
});
const agent = navigator.userAgent.toLowerCase();
if (agent.includes("android")) {
window.location = GOOGLE_PLAY_STORE_LINK;
} else if (
agent.includes("ipad") ||
agent.includes("iphone") ||
agent.includes("ipod")
) {
window.location = APPLE_APP_STORE_LINK;
}
</script>

<!-- Fallback in case JavaScript is disabled or the user is not on Android/iOS. -->
<div id="message">
<img alt="WHO logo" class="logo" src="who_logo.svg" />
<p>
If you are not automatically redirected, please click one of the links
below.
</p>
<div id="badges">
<a href="https://apps.apple.com/app/id1503458183"
><img
alt="Download on the Apple App Store"
src="apple-app-store-badge-en.svg"
height="40px"
class="badge"
/></a>
<a
href="https://play.google.com/store/apps/details?id=org.who.WHOMyHealth"
><img
alt="Get it on Google Play"
src="google-play-badge-en.png"
class="badge"
/></a>
</div>
</div>
</body>
</html>
Loading

0 comments on commit 78c43d4

Please sign in to comment.