Skip to content
Jump to bottom

Feature/ionic #1

Merged
merged 3 commits into from
Sep 24, 2024
+142 −101
Merged

Feature/ionic #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dce9382
ionic files
bpd01001 Sep 19, 2024
d1cc9ed
working
bpd01001 Sep 24, 2024
40fc490
fixes
bpd01001 Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
62 changes: 2 additions & 60 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,4 @@
body {
margin: 0;
background-color: lightblue;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
ion-toolbar {
--ion-background-color: aliceblue;
}

.home-page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.about-page {
min-height: 100vh;
display: grid;
grid-template-columns: auto auto;
align-items: center;
justify-items: center;
gap: 1em;
}

.about-page img {
max-width: 50%;
display: inline-block;
text-align: center;
transform: scale(1);
transition: transform 0.5s;
}

.about-page img:hover {
transform: scale(1.5);
}

.home-page ul {
margin: 0;
padding: 0;
width: 75%;
background-color: white;
list-style-type: none;
text-align: center;
}

.home-page li {
border-bottom: 1px solid lightblue;
}

li a {
display: block;
padding: 1em 0;
font-size: 2em;
background-color: darkslateblue;
color: white;
text-decoration: none;
}

li a:hover {
color: darkslateblue;
background-color: white;
transition: all 0.5s;
}
23 changes: 0 additions & 23 deletions gallery.html
View file
Open in desktop

This file was deleted.

129 changes: 111 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Home | Offline First Demo</title>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js');
}
</script>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body class="home-page">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Photo Gallery</a></li>
</ul>
</body>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Home | Offline First Demo</title>

<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/core.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@next/css/ionic.bundle.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="css/styles.css" />

<!-- Register your service worker here... -->


</head>

<body class="home-page">

<ion-app>

<div class="ion-page" id="main-content">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Photo Gallery</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>

<ion-card class="ion-margin">
<img alt="Antelope" src="images/antelope.jpg" />
<ion-card-content>
Antelope
</ion-card-content>
</ion-card>

<ion-card class="ion-margin">
<img alt="Bobcat" src="images/bobcat.jpg" />
<ion-card-content>
Bobcat
</ion-card-content>


</ion-card>

<ion-card class="ion-margin">
<img alt="Caracal" src="images/caracal.jpg" />
<ion-card-content>
Caracal
</ion-card-content>
</ion-card>

<ion-card class="ion-margin">
<img alt="Caribou" src="images/caribou-bulls.jpg" />
<ion-card-content>
Caribou Bulls
</ion-card-content>
</ion-card>

<ion-card class="ion-margin">
<img alt="Caribou" src="images/caribou.jpg" />
<ion-card-content>
Caribou
</ion-card-content>
</ion-card>

<ion-card class="ion-margin">
<img alt="Cheetah" src="images/cheetah.jpg" />
<ion-card-content>
Cheetah
</ion-card-content>
</ion-card>

<ion-card class="ion-margin">
<img alt="Coyote" src="images/coyote.jpg" />
<ion-card-content>
Coyote
</ion-card-content>
</ion-card>

<ion-card class="ion-margin">
<img alt="Ferrets" src="images/ferrets.jpg" />
<ion-card-content>
Ferrets
</ion-card-content>
</ion-card>

<ion-card class="ion-margin">
<img alt="Ox" src="images/ox.jpg" />
<ion-card-content>
Ox
</ion-card-content>
</ion-card>

<ion-card class="ion-margin">
<img alt="Coyote" src="images/tiger.jpg" />
<ion-card-content>
Tiger
</ion-card-content>
</ion-card>

</ion-content>
</div>

</ion-app>
</body>

</html>
29 changes: 29 additions & 0 deletions sw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// Name of our cache
const cacheName = 'offline-pwa-gallery-v1';

// URLs to cache for offline mode
const urlsToCache = [

];

// Cache files on service worker registration
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(cacheName).then((cache) => {
return cache.addAll(urlsToCache);
})
);
});

// Intercept fetch requests to serve cached assets
self.addEventListener('fetch', (event) => {
if(event.request.url.match(/^https:\/\//)){
console.log('Browser is requesting:', event.request.url);
}
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
// It can update the cache to serve updated content on the next request
return cachedResponse || fetch(event.request);
})
);
});