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
@ -95,4 +106,4 @@
    }
  </script>
 </body>
-</html>
+</html>
--- 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%;
+  }
+}