This repository has been archived by the owner on Dec 8, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 142
/
index.html
93 lines (76 loc) · 2.85 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes, maximum-scale=5.0">
<title>Expense Manager</title>
<meta name="description" content="Progressive Web App built using Polymer and Vaadin components">
<!--
The `<base>` tag below is present to support two advanced deployment options:
1) Differential serving. 2) Serving from a non-root path (e.g. `my.domain/expense-manager/`)
Instead of manually editing the `<base>` tag yourself, you should generally either:
a) Add a `basePath` property to the build configuration in your `polymer.json`.
b) Use the `--base-path` command-line option for `polymer build`.
c) Add a `autoBasePath` property in your `polymer.json` to apply this setting for multiple builds.
-->
<base href="/">
<link rel="icon" href="images/favicon.ico">
<meta name="theme-color" content="#33383a">
<link rel="manifest" href="manifest.json">
<!-- iOS -->
<link rel="apple-touch-icon" href="images/icons/icon-144x144.png" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-title" content="Expenses">
<script>
window.Polymer = {rootPath: document.querySelector('base').getAttribute('href')};
// Load and register pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js', {
scope: '/',
});
});
}
</script>
<!-- Add any global styles for body, document, etc. -->
<style>
html {
height: 100%;
}
body {
overflow: hidden;
display: flex;
flex-direction: column;
margin: 0;
height: 100%;
background: hsl(214, 35%, 21%);
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
}
/* styling for render while resources are loading */
expense-app[unresolved] {
display: block;
position: relative;
top: calc((100% - 343px) / 2);
width: 300px;
margin: 0 auto;
font-size: 28px;
}
@media (max-height: 375px) {
expense-app[unresolved] {
top: 16px;
}
}
</style>
</head>
<body>
<expense-app unresolved>Expense Manager</expense-app>
<!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<!-- Load your application shell -->
<link rel="import" href="src/expense-app.html">
</body>
</html>