From f00e9753d35822e3f8933c468403bbdb7a4b61b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Rhyme=20Guibone=20A=C3=B1asco?=
 <oliverrhyme.anasco@g.msuiit.edu.ph>
Date: Mon, 15 Feb 2021 20:23:18 +0800
Subject: [PATCH] Add web native splash screen

---
 pubspec.lock                   | 47 +++++++++++++++++++---------------
 web/icons/splash_animation.svg | 23 +++++++++++++++++
 web/index.html                 | 14 +++++++++-
 web/style.css                  | 35 +++++++++++++++++++++++++
 4 files changed, 98 insertions(+), 21 deletions(-)
 create mode 100644 web/icons/splash_animation.svg
 create mode 100644 web/style.css

diff --git a/pubspec.lock b/pubspec.lock
index aee2b14..407f93b 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -7,42 +7,42 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.5.0-nullsafety.1"
+    version: "2.5.0"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0-nullsafety.1"
+    version: "2.1.0"
   characters:
     dependency: transitive
     description:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0-nullsafety.3"
+    version: "1.1.0"
   charcode:
     dependency: transitive
     description:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0-nullsafety.1"
+    version: "1.2.0"
   clock:
     dependency: transitive
     description:
       name: clock
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0-nullsafety.1"
+    version: "1.1.0"
   collection:
     dependency: transitive
     description:
       name: collection
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.15.0-nullsafety.3"
+    version: "1.15.0"
   convert:
     dependency: transitive
     description:
@@ -70,7 +70,7 @@ packages:
       name: fake_async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0-nullsafety.1"
+    version: "1.2.0"
   ffi:
     dependency: transitive
     description:
@@ -135,20 +135,27 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.16.1"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.6.3"
   matcher:
     dependency: transitive
     description:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.10-nullsafety.1"
+    version: "0.12.10"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0-nullsafety.3"
+    version: "1.3.0"
   nested:
     dependency: transitive
     description:
@@ -162,7 +169,7 @@ packages:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0-nullsafety.1"
+    version: "1.8.0"
   path_provider:
     dependency: transitive
     description:
@@ -244,49 +251,49 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0-nullsafety.2"
+    version: "1.8.0"
   stack_trace:
     dependency: transitive
     description:
       name: stack_trace
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.10.0-nullsafety.1"
+    version: "1.10.0"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0-nullsafety.1"
+    version: "2.1.0"
   string_scanner:
     dependency: transitive
     description:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0-nullsafety.1"
+    version: "1.1.0"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0-nullsafety.1"
+    version: "1.2.0"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.19-nullsafety.2"
+    version: "0.2.19"
   typed_data:
     dependency: transitive
     description:
       name: typed_data
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0-nullsafety.3"
+    version: "1.3.0"
   url_launcher:
     dependency: "direct main"
     description:
@@ -335,7 +342,7 @@ packages:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0-nullsafety.3"
+    version: "2.1.0"
   very_good_analysis:
     dependency: "direct dev"
     description:
@@ -358,5 +365,5 @@ packages:
     source: hosted
     version: "0.1.2"
 sdks:
-  dart: ">=2.10.0-110 <2.11.0"
-  flutter: ">=1.22.0 <2.0.0"
+  dart: ">=2.12.0-0.0 <3.0.0"
+  flutter: ">=1.22.0"
diff --git a/web/icons/splash_animation.svg b/web/icons/splash_animation.svg
new file mode 100644
index 0000000..4f83999
--- /dev/null
+++ b/web/icons/splash_animation.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="translate(26.666666666666668,26.666666666666668)">
+  <rect x="-20" y="-20" width="40" height="40" fill="#ed424d">
+    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.1500000000000001;1" begin="-0.3s"></animateTransform>
+  </rect>
+</g>
+<g transform="translate(73.33333333333333,26.666666666666668)">
+  <rect x="-20" y="-20" width="40" height="40" fill="#ea832e">
+    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.1500000000000001;1" begin="-0.2s"></animateTransform>
+  </rect>
+</g>
+<g transform="translate(26.666666666666668,73.33333333333333)">
+  <rect x="-20" y="-20" width="40" height="40" fill="#f1c30f">
+    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.1500000000000001;1" begin="0s"></animateTransform>
+  </rect>
+</g>
+<g transform="translate(73.33333333333333,73.33333333333333)">
+  <rect x="-20" y="-20" width="40" height="40" fill="#2c90e5">
+    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.1500000000000001;1" begin="-0.1s"></animateTransform>
+  </rect>
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 05c5e3c..2015132 100644
--- a/web/index.html
+++ b/web/index.html
@@ -28,8 +28,10 @@
 
   <title>devs</title>
   <link rel="manifest" href="manifest.json">
+
+  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
-<body>
+<body onload="document.body.style.opacity='1'">
   <!-- This script installs service_worker.js to provide PWA functionality to
        application. For more information, see:
        https://developers.google.com/web/fundamentals/primers/service-workers -->
@@ -41,5 +43,15 @@
     }
   </script>
   <script src="main.dart.js" type="application/javascript"></script>
+
+  <div class="Main-Container" >
+    <div class="Fill-Width">
+      <img src="./assets/assets/logos/logo.png" id="logo" />
+    </div>
+    <div class="Fill-Width">
+      <img src="./icons/splash_animation.svg" id="splash" />
+    </div>
+  </div>
+
 </body>
 </html>
diff --git a/web/style.css b/web/style.css
new file mode 100644
index 0000000..3bfeccd
--- /dev/null
+++ b/web/style.css
@@ -0,0 +1,35 @@
+.Main-Container {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-right: -50%;
+    transform: translate(-50%, -50%)
+
+}
+
+.Fill-Width {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+#logo {
+    width: 80vw;
+    max-width: 500px;
+}
+
+#splash {
+    margin-top: 25px;
+    width: 15vw;
+    height: 15vw;
+    max-width: 75px;
+    max-height: 75px;
+}
+
+body{
+    opacity: 0;
+    transition: opacity 1s;
+    -webkit-transition: opacity 1s; /* Safari */
+}