serviceworker for offline usage - webgbcam - [fork] gameboy webcam
HTML git clone git://src.adamsgaard.dk/webgbcam
DIR Log
DIR Files
DIR Refs
DIR README
DIR LICENSE
---
DIR commit 815ecf8824237f23917ceea6a9d6401598516362
DIR parent 9204e28cb2a7e8ac2c4e3a497056d42f8e2ba3df
HTML Author: Erin Pinheiro <hello@mynameiser.in>
Date: Sun, 25 Oct 2020 02:19:10 -0300
serviceworker for offline usage
Diffstat:
A bg.png | 0
M index.html | 17 +++++++++++++++--
A jul.css | 94 +++++++++++++++++++++++++++++++
A mac-frame.png | 0
A manifest.webmanifest | 16 ++++++++++++++++
M style.css | 39 ++++++++++++++++++++++++++++++-
A sw.js | 45 +++++++++++++++++++++++++++++++
7 files changed, 208 insertions(+), 3 deletions(-)
---
DIR diff --git a/bg.png b/bg.png
Binary files differ.
DIR diff --git a/index.html b/index.html
@@ -4,9 +4,9 @@
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>gremlin girl camera</title>
+ <title>webgbcam</title>
<link rel="stylesheet" href="style.css">
- <link rel="stylesheet" href="../css/jul.css">
+ <link rel="manifest" href="manifest.webmanifest">
<meta property="og:title" content="webgbcam">
<meta property="og:description" content="gameboy camera-like experience in your browser!">
@@ -43,5 +43,18 @@
</div>
<script src="app.js"></script>
+ <script>
+ if('serviceWorker' in navigator) {
+ navigator.serviceWorker
+ .register('sw.js', {scope: './'})
+ .then(function(registration) {
+ // Registration was successful
+ console.log('ServiceWorker registration successful with scope: ', registration.scope);
+ }, function(err) {
+ // registration failed :(
+ console.log('ServiceWorker registration failed: ', err);
+ });
+ }
+ </script>
</body>
</html>
\ No newline at end of file
DIR diff --git a/jul.css b/jul.css
@@ -0,0 +1,94 @@
+.maple-window {
+ display: inline-block;
+ border-width: 35px 20px 20px 20px;
+ border-style: solid;
+ border-image: url("https://maple.pet/css/mac-frame.png") 30 40 22 22 fill repeat;
+ border-image-width: 30px 40px 22px 22px;
+ color: #000;
+ position: relative;
+ text-align: left;
+ font-size: 12px;
+ font-family: geneva, sans-serif;
+ min-width: 200px;
+}
+
+.maple-window img {
+ vertical-align: bottom;
+}
+
+.maple-window blockquote, .maple-blockquote, .maple-window .quote {
+ margin: 0.2em 0 0.2em 0 !important;
+ border-style: solid;
+ border-width: 40px 30px 25px 15px;
+ border-image: url("https://maple.pet/css/mac-frame-2.png") 44 55 31 19 fill repeat;
+ border-image-width: 44px 55px 31px 19px;
+ position: relative;
+ min-width: 18em;
+}
+.maple-window blockquote > font.fonts, .maple-window blockquote > span.quotedby, .maple-window .quote .quoteheader {
+ position: absolute;
+ top: -25px;
+}
+.maple-window blockquote > hr {
+ display: none;
+}
+
+.maple-window a {
+ color: #9999cc;
+ text-shadow: none;
+}
+.maple-window a:hover {
+ color: #ccccff;
+}
+
+.maple-window-title {
+ position: absolute;
+ top: -31px;
+ text-align: center;
+ width: 100%;
+ left: 0;
+}
+
+.maple-window-title > span {
+ background: #ccc;
+ padding: 1px 5px 1px 5px;
+ font-size: 12px;
+ font-family: chicago, sans-serif;
+ vertical-align: middle;
+ margin-right: 20px;
+ white-space: nowrap;
+}
+
+.maple-bg {
+ background: url("https://maple.pet/bg.png");
+ padding: 25px;
+ min-height: 350px;
+}
+
+.maple-button {
+ display: inline-block;
+ margin: 4px 5px 0 0;
+ border-style: solid;
+ border-width: 7px;
+ border-image: url("https://maple.pet/css/mac-button.png") 7 fill repeat;
+ color: #000;
+ text-decoration: none;
+ font-family: chicago, sans-serif;
+ padding: 1px 2px 0 2px;
+ text-align: center;
+}
+
+.maple-button:link, .maple-button:visited, .maple-button:active, .maple-button:hover {
+ color: #000 !important;
+ text-decoration: none;
+ font-weight: normal;
+}
+
+.url3790, [href="profile.php?id=3790"] {
+ color: #a631c6 !important;
+}
+.url3790 {
+ background: url('http://maple.pet/avatars/icon.png') no-repeat;
+ padding-left: 20px;
+ height: 16px;
+}
DIR diff --git a/mac-frame.png b/mac-frame.png
Binary files differ.
DIR diff --git a/manifest.webmanifest b/manifest.webmanifest
@@ -0,0 +1,15 @@
+{
+ "background_color": "#99ccff",
+ "description": "A web-based camera filter that emulates the look of the Game Boy Camera.",
+ "display": "fullscreen",
+ "icons": [
+ {
+ "src": "icon.png",
+ "sizes": "256x256",
+ "type": "image/png"
+ }
+ ],
+ "name": "webgbcam",
+ "short_name": "webgbcam",
+ "start_url": "index.html"
+}
+\ No newline at end of file
DIR diff --git a/style.css b/style.css
@@ -6,7 +6,7 @@ html, body{
}
body {
- background: url("../bg.png");
+ background: url("bg.png");
text-align: center;
font: 12px sans-serif;
}
@@ -18,6 +18,43 @@ body {
.maple-window {
margin: 5px;
vertical-align: top;
+ display: inline-block;
+ border-width: 35px 20px 20px 20px;
+ border-style: solid;
+ border-image: url("mac-frame.png") 30 40 22 22 fill repeat;
+ border-image-width: 30px 40px 22px 22px;
+ color: #000;
+ position: relative;
+ text-align: left;
+ font-size: 12px;
+ font-family: geneva, sans-serif;
+ min-width: 200px;
+}
+
+.maple-window a {
+ color: #9999cc;
+ text-shadow: none;
+}
+.maple-window a:hover {
+ color: #ccccff;
+}
+
+.maple-window-title {
+ position: absolute;
+ top: -31px;
+ text-align: center;
+ width: 100%;
+ left: 0;
+}
+
+.maple-window-title > span {
+ background: #ccc;
+ padding: 1px 5px 1px 5px;
+ font-size: 12px;
+ font-family: chicago, sans-serif;
+ vertical-align: middle;
+ margin-right: 20px;
+ white-space: nowrap;
}
/*#camera {
DIR diff --git a/sw.js b/sw.js
@@ -0,0 +1,44 @@
+const cacheName = 'webgbcam-v1'
+
+self.addEventListener('install', function(e) {
+ e.waitUntil(
+ caches.open(cacheName).then(function(cache) {
+ return cache.addAll([
+ '.',
+ 'index.html',
+ 'style.css',
+ 'app.js',
+ 'bg.png',
+ 'mac-frame.png',
+ 'ui-capture.png',
+ 'ui-settings.png',
+ 'ui-main.png'
+ ]);
+ })
+ );
+});
+
+// The fetch handler serves responses for same-origin resources from a cache.
+// If no response is found, it populates the runtime cache with the response
+// from the network before returning it to the page.
+self.addEventListener('fetch', event => {
+ // Skip cross-origin requests, like those for Google Analytics.
+ if (event.request.url.startsWith(self.location.origin)) {
+ event.respondWith(
+ caches.match(event.request).then(cachedResponse => {
+ if (cachedResponse) {
+ return cachedResponse;
+ }
+
+ return caches.open(cacheName).then(cache => {
+ return fetch(event.request).then(response => {
+ // Put a copy of the response in the runtime cache.
+ return cache.put(event.request, response.clone()).then(() => {
+ return response;
+ });
+ });
+ });
+ })
+ );
+ }
+});
+\ No newline at end of file