feat(web): improve splash screen and app environment

fulleni · fulleni · commit 490cda34e715 · 2025-07-29T07:21:09.000+01:00
- Add splash.css for better styling of the splash screen
- Update splash screen HTML structure and CSS
- Change app environment to demo in main.dart
- Reorder imports in main.dart
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,12 +1,12 @@
 import 'package:device_preview/device_preview.dart';
-import 'package:flutter_news_app_mobile_client_full_source_code/app/services/splash_screen_remover/web_splash_remover.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/app/config/config.dart';
+import 'package:flutter_news_app_mobile_client_full_source_code/app/services/splash_screen_remover/web_splash_remover.dart';
 import 'package:flutter_news_app_mobile_client_full_source_code/bootstrap.dart';
 
 // Define the current application environment (production/development/demo).
-const appEnvironment = AppEnvironment.development;
+const appEnvironment = AppEnvironment.demo;
 
 void main() async {
   final appConfig = switch (appEnvironment) {
diff --git a/web/index.html b/web/index.html
@@ -29,6 +29,7 @@
 
   <title>Flutter News App</title>
   <link rel="manifest" href="manifest.json">
+  <link rel="stylesheet" type="text/css" href="splash/splash.css">
   
   
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
@@ -98,25 +99,24 @@
   </style>
   <script id="splash-screen-script">
     function removeSplashFromWeb() {
-      document.getElementById("splash")?.remove();
-      document.getElementById("splash-branding")?.remove();
+      document.getElementById("splash-container")?.remove();
       document.body.style.background = "transparent";
     }
   </script>
 </head>
 <body>
-  <picture id="splash">
-      <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
-      <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
-      <img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
-  </picture>
-  <div id="loading-indicator">
-    <div class="spinner"></div>
+  <div id="splash-container" class="center">
+    <picture id="splash">
+        <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
+        <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
+        <img aria-hidden="true" src="splash/img/light-1x.png" alt="">
+    </picture>
+    <div class="loader"></div>
   </div>
   <script>
     {{flutter_bootstrap_js}}
   </script>
 
 
 
-</body></html>
+</body></html>
diff --git a/web/splash/splash.css b/web/splash/splash.css
@@ -0,0 +1,46 @@
+.center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+#splash-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#splash {
+  margin-bottom: 20px;
+}
+
+.loader {
+  border: 4px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 4px solid #3498db;
+  width: 40px;
+  height: 40px;
+  -webkit-animation: spin 2s linear infinite; /* Safari */
+  animation: spin 2s linear infinite;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@media (prefers-color-scheme: dark) {
+  .loader {
+    border-top: 4px solid #90caf9; /* A lighter blue for dark mode */
+  }
+}
