index.html - webgbcam - [fork] gameboy webcam
HTML git clone git://src.adamsgaard.dk/webgbcam
DIR Log
DIR Files
DIR Refs
DIR README
DIR LICENSE
---
index.html (3705B)
---
1 <!doctype html>
2 <html lang=”en”>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="x-ua-compatible" content="ie=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>webgbcam</title>
8 <link rel="stylesheet" href="style.css">
9 <link rel="manifest" href="manifest.webmanifest">
10
11 <meta property="og:title" content="webgbcam">
12 <meta property="og:description" content="gameboy camera-like experience in your browser!">
13 <meta property="og:image" content="https://maple.pet/webgbcam/icon.png">
14 <meta property="og:url" content="https://maple.pet/webgbcam/">
15 </head>
16 <body>
17 <div id="main-app-window" class="maple-window centered">
18 <div class="maple-window-title"><span>webgbcam v4.3</span></div>
19 <div id="camera">
20 <canvas id="app-view"></canvas>
21 <canvas id="camera-view"></canvas>
22 <canvas id="camera-output"></canvas>
23 <video id="camera-stream" autoplay playsinline></video>
24 </div><br/>
25 <button id="button-about" onclick="toggleAbout();">about</button>
26 </div>
27
28 <div id="about" class="maple-window centered modal hidden">
29 <div class="maple-window-title"><span>about</span></div>
30 <h2 class="blink">NFTs: No Fucking Thanks</h2>
31
32 <p>made by <a href="https://maple.pet">maple</a> - inspired by christine love's interstellar selfie station</p>
33
34 <p>if the app is blank, make sure you have cameras connected and browser camera permissions enabled!</p>
35
36 <p>webgbcam uses <a href="https://github.com/jnordberg/gif.js">gif.js</a><br/>
37 you can check the source code on <a href="https://github.com/Lana-chan/webgbcam">github</a>!</p>
38
39 <p>as seen on:
40 <ul>
41 <li>Mashable: <a href="https://mashable.com/article/game-boy-camera-style-web-app">New web app lets you take Game Boy Camera-style pics and pretend it's 1998</a></li>
42 <li>Nerdist: <a href="https://nerdist.com/article/game-boy-app-camera-selfies/">Web App Lets You Take 1998 Game Boy Camera-Style Selfies</a></li>
43 <li>Hackaday: <a href="https://hackaday.com/2020/10/26/the-game-boy-camera-or-how-i-learned-to-stop-worrying-and-love-the-pixels/">The Game Boy Camera, Or: How I Learned To Stop Worrying And Love The Pixels</a></li>
44 </ul>
45 </p>
46
47 <p>if you like the stuff i do, check out <a href="https://maple.pet/">my website</a> and please <a href="https://ko-fi.com/squirrel">donate to me on ko-fi</a>!</p>
48
49 <p>ps: you look great today!</p>
50
51 <button id="button-close" onclick="toggleAbout();">close</button>
52 </div>
53
54 <div id="gif-preview" class="maple-window modal hidden">
55 <div class="maple-window-title"><span>gif preview</span></div>
56 <img id="gif-img" src="ui/loading.gif"/>
57 <div id="gif-buttons" class="hidden">
58 <button type="button" onclick="downloadGif();">yes!!!</button>
59 <button class="right" type="button" onclick="resetGifModal();">no!!!</button>
60 </div>
61 </div>
62
63 <div class="hidden">
64 <img src="ui/ui-main.png" id="ui-main" />
65 <img src="ui/ui-settings.png" id="ui-settings" />
66 <img src="ui/ui-capture.png" id="ui-capture" />
67 <img src="ui/ui-hidden.png" id="ui-hidden" />
68 <img src="ui/ui-timer.png" id="ui-timer" />
69 <img src="ui/ui-record.png" id="ui-record" />
70 </div>
71
72 <script type="text/javascript" src="gifjs/gif.js"></script>
73 <script src="app.js"></script>
74 <script>
75 if('serviceWorker' in navigator) {
76 navigator.serviceWorker
77 .register('sw.js', {scope: './'})
78 .then(function(registration) {
79 // Registration was successful
80 console.log('ServiceWorker registration successful with scope: ', registration.scope);
81 registration.update();
82 }, function(err) {
83 // registration failed :(
84 console.log('ServiceWorker registration failed: ', err);
85 });
86 }
87 </script>
88 </body>
89