Add web support

3 years ago · 1d08cdb1d7
parent 7334bcc08f
commit 1d08cdb1d7
8 changed files with 55 additions and 1 deletions
--- a/web/index.html
+++ b/web/index.html
@ -1,3 +1,13 @@
  <picture id="splash">
    <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x" media="(prefers-color-scheme: light) or (prefers-color-scheme: no-preference)">
    <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x" media="(prefers-color-scheme: dark)">
    <img class="center" src="splash/img/light-1x.png" />
  </picture>
  <picture id="splash">
    <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x" media="(prefers-color-scheme: light) or (prefers-color-scheme: no-preference)">
    <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x" media="(prefers-color-scheme: dark)">
    <img class="center" src="splash/img/light-1x.png" />
  </picture>
 <!DOCTYPE html>
 <html>
 <head>
@ -25,6 +35,7 @@
  <title>ozgurkon_app</title>
  <link rel="manifest" href="manifest.json">
  <link rel="stylesheet" type="text/css" href="splash/style.css">
 </head>
 <body>
  <!-- This script installs service_worker.js to provide PWA functionality to
--- a/web/splash/img/dark-1x.png
+++ b/web/splash/img/dark-1x.png
--- a/web/splash/img/dark-2x.png
+++ b/web/splash/img/dark-2x.png
--- a/web/splash/img/dark-3x.png
+++ b/web/splash/img/dark-3x.png
--- a/web/splash/img/light-1x.png
+++ b/web/splash/img/light-1x.png
--- a/web/splash/img/light-2x.png
+++ b/web/splash/img/light-2x.png
--- a/web/splash/img/light-3x.png
+++ b/web/splash/img/light-3x.png
--- a/web/splash/style.css
+++ b/web/splash/style.css
@ -0,0 +1,43 @@
 body, html {
  margin:0;
  height:100%;
  background: #c03e24;
  background-image: url("img/light-background.png");
  background-size: 100% 100%;
 }
 .center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
 }
 .contain {
  display:block;
  width:100%; height:100%;
  object-fit: contain;
 }
 .stretch {
  display:block;
  width:100%; height:100%;
 }
 .cover {
  display:block;
  width:100%; height:100%;
  object-fit: cover;
 }
@media (prefers-color-scheme: dark) {
  body {
    margin:0;
    height:100%;
    background: #c03e24;
    background-image: url("img/dark-background.png");
    background-size: 100% 100%;
  }
 }