web splash screen gif

Frontend/android/app/src/main/res/drawable-v21/launch_background.xml

@@ -6,7 +6,7 @@
     <item>
         <bitmap android:gravity="center" android:src="@drawable/splash"/>
     </item>
-    <item android:bottom="24dp">
+    <item android:bottom="0dp">
         <bitmap android:gravity="bottom" android:src="@drawable/branding"/>
     </item>
 </layer-list>

Frontend/android/app/src/main/res/drawable/launch_background.xml

@@ -6,7 +6,7 @@
     <item>
         <bitmap android:gravity="center" android:src="@drawable/splash"/>
     </item>
-    <item android:bottom="24dp">
+    <item android:bottom="0dp">
         <bitmap android:gravity="bottom" android:src="@drawable/branding"/>
     </item>
 </layer-list>

Frontend/ios/Podfile.lock

@@ -40,7 +40,7 @@ PODS:
   - fl_downloader (0.0.1):
     - Flutter
   - Flutter (1.0.0)
-  - flutter_native_splash (0.0.1):
+  - flutter_native_splash (2.4.3):
     - Flutter
   - flutter_tts (0.0.1):
     - Flutter
@@ -162,7 +162,7 @@ SPEC CHECKSUMS:
   file_picker: a0560bc09d61de87f12d246fc47d2119e6ef37be
   fl_downloader: dc99aa8dd303f862cccb830087f37acc9b0156ee
   Flutter: e0871f40cf51350855a761d2e70bf5af5b9b5de7
-  flutter_native_splash: 35ddbc7228eafcb3969dcc5f1fbbe27c1145a4f0
+  flutter_native_splash: c32d145d68aeda5502d5f543ee38c192065986cf
   flutter_tts: b88dbc8655d3dc961bc4a796e4e16a4cc1795833
   geolocator_apple: ab36aa0e8b7d7a2d7639b3b4e48308394e8cef5e
   Google-Mobile-Ads-SDK: 1dfb0c3cb46c7e2b00b0f4de74a1e06d9ea25d67

Frontend/ios/Runner/Base.lproj/LaunchScreen.storyboard

@@ -22,7 +22,7 @@
                         </subviews>
                         <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
-                            <constraint firstAttribute="bottom" secondItem="Uyq-Kz-ftE" secondAttribute="bottom" constant="24" id="8Yb-q4-8bl"/>
+                            <constraint firstAttribute="bottom" secondItem="Uyq-Kz-ftE" secondAttribute="bottom" constant="0" id="8Yb-q4-8bl"/>
                             <constraint firstItem="Uyq-Kz-ftE" firstAttribute="centerX" secondItem="YRO-k0-Ey4" secondAttribute="centerX" id="3kg-TC-cPP"/>
                             <constraint firstItem="YRO-k0-Ey4" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="3T2-ad-Qdv"/>
                             <constraint firstItem="tWc-Dq-wcI" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="RPx-PI-7Xg"/>

Frontend/ios/Runner/Info.plist

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-<dict>
+	<dict>
 		<key>GADApplicationIdentifier</key>
 		<string>ca-app-pub-4781880856775334~6935644635</string>
 		<key>CADisableMinimumFrameDurationOnPhone</key>
@@ -73,5 +73,5 @@
 			<string>UIInterfaceOrientationLandscapeLeft</string>
 			<string>UIInterfaceOrientationLandscapeRight</string>
 		</array>
-</dict>
+	</dict>
 </plist>

Frontend/pubspec.lock

@@ -474,10 +474,10 @@ packages:
     dependency: "direct main"
     description:
       name: flutter_native_splash
-      sha256: aa06fec78de2190f3db4319dd60fdc8d12b2626e93ef9828633928c2dcaea840
+      sha256: "8321a6d11a8d13977fa780c89de8d257cce3d841eecfb7a4cadffcc4f12d82dc"
       url: "https://pub.dev"
     source: hosted
-    version: "2.4.1"
+    version: "2.4.6"
   flutter_parsed_text:
     dependency: transitive
     description:

Frontend/pubspec.yaml

@@ -22,7 +22,7 @@ dependencies:
   args: ^2.7.0
   gif_view: ^1.0.3
   intl: ^0.20.2
-  flutter_native_splash: ^2.4.1
+  flutter_native_splash: ^2.4.6
   printing: ^5.13.3
   geolocator: ^14.0.1
   table_calendar: ^3.1.2
@@ -75,13 +75,16 @@ flutter:
     - family: MihIcons
       fonts:
         - asset: lib/mih_components/mih_package_components/assets/fonts/Mih_Icons.ttf
+        
 flutter_native_splash:
   color: "#3A4454"
   image: lib/mih_components/mih_package_components/assets/images/logo_light.png
-  branding: lib/mih_components/mih_package_components/assets/images/branding_text.png
+  image_web: lib/mih_components/mih_package_components/assets/images/splash_screen/mih_loading_logo.gif
+  branding: lib/mih_components/mih_package_components/assets/images/splash_screen/splash_screen_branding.png
+  branding_web: lib/mih_components/mih_package_components/assets/images/splash_screen/mih_splash_branding.gif
   branding_mode: bottom
-  branding_bottom_padding: 24
+  # branding_bottom_padding: 24
   android_12:
     image: lib/mih_components/mih_package_components/assets/images/splash_screen/splash_screen_icon.png
     color: "#3A4454"
-    branding: lib/mih_components/mih_package_components/assets/images/branding_text.png
+    branding: lib/mih_components/mih_package_components/assets/images/splash_screen/splash_screen_branding.png

Frontend/web/index.html

@@ -1,14 +1,10 @@
-<!DOCTYPE html>
+<!DOCTYPE html><html><head>
-<html>
-
-<head>
   <base href="/">
 
   <!-- APP Description -->
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description"
+  <meta name="description" content="MIH, the first Mzansi super app by Mzansi Innovation Hub. Streamline your life with Mzansi Profile, Wallet, Patient Manager, AI, Directory, Calendar, Calculator, &amp; secure MIH Access. Unify social, business &amp; personal tools.">
-    content="MIH, the first Mzansi super app by Mzansi Innovation Hub. Streamline your life with Mzansi Profile, Wallet, Patient Manager, AI, Directory, Calendar, Calculator, & secure MIH Access. Unify social, business & personal tools.">
 
   <!-- iOS meta tags & icons -->
   <meta name="mobile-web-app-capable" content="yes">
@@ -20,7 +16,7 @@
   <!-- Favicon -->
   <link rel="icon" href="favicon.ico">
 
-  <title>MIH App: Mzansi Innovation Hub - All-in-One Super App for Business & Personal Life</title>
+  <title>MIH App: Mzansi Innovation Hub - All-in-One Super App for Business &amp; Personal Life</title>
   <link rel="manifest" href="manifest.json">
 
   <!-- test stuff for speed -->
@@ -69,74 +65,8 @@
     var dartPdfJsBaseUrl = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/";
   </script> -->
   <!--------------------->
-  <style id="splash-screen-style">
-    html {
-      height: 100%
-    }
   
-    body {
-      margin: 0;
-      min-height: 100%;
-      background-color: #3A4454;
-      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;
-    }
-
-    .bottom {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      -ms-transform: translate(-50%, 0);
-      transform: translate(-50%, 0);
-    }
-
-    .bottomLeft {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-    }
-
-    .bottomRight {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-    }
-  </style>
-  <script id="splash-screen-script">
-    function removeSplashFromWeb() {
-      document.getElementById("splash")?.remove();
-      document.getElementById("splash-branding")?.remove();
-      document.body.style.background = "transparent";
-    }
-  </script>
   <script type="application/ld+json">
   {
     "@context": "http://schema.org",
@@ -173,9 +103,148 @@
     }
   }
   </script>
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  <style id="splash-screen-style">
+    html {
+      height: 100%
+    }
+
+    body {
+      margin: 0;
+      min-height: 100%;
+      background-color: #3A4454;
+          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;
+    }
+
+    .bottom {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      -ms-transform: translate(-50%, 0);
+      transform: translate(-50%, 0);
+    }
+
+    .bottomLeft {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+
+    .bottomRight {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
+  </style>
+  <script id="splash-screen-script">
+    function removeSplashFromWeb() {
+      document.getElementById("splash")?.remove();
+      document.getElementById("splash-branding")?.remove();
+      document.body.style.background = "transparent";
+    }
+  </script>
 </head>
 
 <body>
+  <picture id="splash-branding">
+    <source srcset="splash/img/branding-1x.gif 1x, splash/img/branding-2x.gif 2x, splash/img/branding-3x.gif 3x, splash/img/branding-4x.gif 4x" media="(prefers-color-scheme: light)">
+    <source srcset="splash/img/branding-dark-1x.gif 1x, splash/img/branding-dark-2x.gif 2x, splash/img/branding-dark-3x.gif 3x, splash/img/branding-dark-4x.gif 4x" media="(prefers-color-scheme: dark)">
+    <img class="bottom" aria-hidden="true" src="splash/img/branding-1x.gif" alt="">
+  </picture>
+  <picture id="splash">
+      <source srcset="splash/img/light-1x.gif 1x, splash/img/light-2x.gif 2x, splash/img/light-3x.gif 3x, splash/img/light-4x.gif 4x" media="(prefers-color-scheme: light)">
+      <source srcset="splash/img/dark-1x.gif 1x, splash/img/dark-2x.gif 2x, splash/img/dark-3x.gif 3x, splash/img/dark-4x.gif 4x" media="(prefers-color-scheme: dark)">
+      <img class="center" aria-hidden="true" src="splash/img/light-1x.gif" alt="">
+  </picture>
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
   <div id="seo-content" style="display:none;">
       <h1>Mzansi Innovation Hub (MIH) - Your All-in-One Super App for South Africa</h1>
       <p>Tired of juggling multiple apps? Mzansi Innovation Hub (MIH) presents the first super app designed specifically for the people and businesses of Mzansi. MIH is your unified online information technology system to streamline both your personal and professional life, bridging the socio-economic divide during the digital revolution.</p>
@@ -186,7 +255,7 @@
           <li><strong>Mzansi Wallet:</strong> Go digital! Securely store all your loyalty cards in one convenient place, reducing clutter.</li>
           <li><strong>Patient Manager:</strong> Revolutionize medical practices with seamless patient appointment scheduling and efficient data management.</li>
           <li><strong>Mzansi AI:</strong> Get instant support and quick answers with our friendly AI assistant, available 24/7.</li>
-          <li><li><strong>Mzansi Directory:</strong> Discover and connect with people and businesses across Mzansi.</li>
+          <li></li><li><strong>Mzansi Directory:</strong> Discover and connect with people and businesses across Mzansi.</li>
           <li><strong>Calendar:</strong> Stay perfectly organized with an integrated calendar for all your personal and business appointments.</li>
           <li><strong>Calculator:</strong> Perform quick calculations, including tips and forex, right within the app.</li>
           <li><strong>MIH Access:</strong> Take control of your security. Easily manage and view who has access to your profile and data.</li>
@@ -209,24 +278,8 @@
       // You might need to adjust this script to ensure it hides *after* the Flutter app's visual elements are fully rendered.
       // A more robust solution might involve listening for a Flutter-specific event when the app is ready.
   </script>
-  <picture id="splash-branding">
+  
-    <source
+  
-      srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x"
-      media="(prefers-color-scheme: light)">
-    <source
-      srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x"
-      media="(prefers-color-scheme: dark)">
-    <img class="bottom" aria-hidden="true" src="splash/img/branding-1x.png" alt="Mzansi Innovation Hub Branding Logo">
-  </picture>
-  <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="MIH App Splash Screen Logo">
-  </picture>
 
 
 
@@ -371,10 +424,9 @@
 
 
   <script id="pdfjs-lib" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/pdf.min.js" defer=""></script>
-  <script id="pdfjs-worker" type="text/javascript"
+  <script id="pdfjs-worker" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/pdf.worker.min.js" defer=""></script>
-    src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/pdf.worker.min.js" defer=""></script>
   <!--------------------->
 
-</body><!-- File Picker & PDF viewer -->
 
-</html>
+
+</body><!-- File Picker & PDF viewer --></html>