-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (88 loc) · 8.58 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TechiePWA</title>
<meta name="theme-color" content="#2F3BA2"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="manifest.json">
<!-- Inlined Critical CSS -->
<style>
:root { --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d; --gray-dark: #343a40; --primary: #007bff; --secondary: #6c757d; --success: #28a745; --info: #17a2b8; --warning: #ffc107; --danger: #dc3545; --light: #f8f9fa; --dark: #343a40; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } *, ::before, ::after { box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } footer, nav { display: block; } body { margin: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: rgb(33, 37, 41); text-align: left; background-color: rgb(255, 255, 255); } h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0.5rem; } p { margin-top: 0px; margin-bottom: 1rem; } a { color: rgb(0, 123, 255); text-decoration: none; background-color: transparent; } button { border-radius: 0px; } button { margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; } button { overflow: visible; } button { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit; } h2, .h2 { font-size: 2rem; } .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col { flex-basis: 0px; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; } .btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .btn-outline-success { color: rgb(40, 167, 69); background-color: transparent; background-image: none; border-color: rgb(40, 167, 69); } .collapse { display: none; } .navbar { position: relative; display: flex; flex-wrap: wrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; padding: 0.5rem 1rem; } .navbar-brand { display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; } .navbar-collapse { flex-basis: 100%; -webkit-box-flex: 1; flex-grow: 1; -webkit-box-align: center; align-items: center; } .navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; } .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: ""; background: center center / 100% 100% no-repeat; } .navbar-light .navbar-brand { color: rgba(0, 0, 0, 0.9); } .navbar-light .navbar-toggler { color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.1); } .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } .card { position: relative; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; min-width: 0px; word-wrap: break-word; background-color: rgb(255, 255, 255); background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.125); border-radius: 0.25rem; } .card-body { -webkit-box-flex: 1; flex: 1 1 auto; padding: 1.25rem; } .card-title { margin-bottom: 0.75rem; } @-webkit-keyframes progress-bar-stripes {
0% { background-position: 1rem 0px; }
100% { background-position: 0px 0px; }
} @keyframes progress-bar-stripes {
0% { background-position: 1rem 0px; }
100% { background-position: 0px 0px; }
} .bg-light { background-color: rgb(248, 249, 250) !important; } .border-danger { border-color: rgb(220, 53, 69) !important; } .mt-1, .my-1 { margin-top: 0.25rem !important; } .mt-2, .my-2 { margin-top: 0.5rem !important; } .my-2 { margin-bottom: 0.5rem !important; } .p-1 { padding: 0.25rem !important; } .text-center { text-align: center !important; } .text-dark { color: rgb(52, 58, 64) !important; }
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">TechiePWA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<a class="btn btn-outline-success my-2 my-sm-0" href="">Read Tutorial</a>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col" id="postsDiv">
</div>
</div>
</div>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js').then(function (r) {
console.log('Service worker successfully registered!');
}).catch(function (e) {
console.log('Service worker failed to register', e);
});
});
}
</script>
<script>
let posts;
document.body.onload = async (e) =>{
console.log("document loaded!");
posts = await fetch("https://www.techiediaries.com/api/feed.json").then(function(response) {
return response.json();
});
//console.log(posts);
posts.forEach(element => {
let child = document.createElement('div');
//child.classList.add('card');
//child.classList.add('text-white');
//child.classList.add('bg-dark');
child.classList.add('mt-1');
['card','text-dark','border-danger','bg-light','p-1','text-center'].forEach((v)=>{
child.classList.add(v);
})
child.innerHTML = `
<div class="card-body">
<h2 class="card-title">${element.title}</h2>
<p class="card-text">${element.excerpt}</p>
<div class="card-footer">
<a href="${element.url}" class="card-link">Read</a>
<a href="#" class="card-link">Save to read offline</a>
</div>
</div>
`
document.getElementById("postsDiv").appendChild(child);
});
}
</script>
<script>
const link = document.createElement('link');
link.href = 'styles/bootstrap.min.css';
link.type = 'text/css';
link.rel = 'stylesheet';
const link0 = document.getElementsByTagName('link')[0];
link0.parentNode.insertBefore(link, link0);
</script>
</body>
</html>