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 */
+}