colors change

2023-08-27 15:43:09 -03:00
parent 5d558032c0
commit c02ea580c7
6 changed files with 116 additions and 28 deletions
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
  <!--
    If you are serving your web app in a path other than the root, change the
@@ -23,13 +24,13 @@
  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="lixo">
+  <meta name="apple-mobile-web-app-title" content="pcasttv">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
-  <link rel="icon" type="image/png" href="favicon.png"/>
+  <link rel="icon" type="image/png" href="favicon.png" />

-  <title>lixo</title>
+  <title>pcasttv</title>
  <link rel="manifest" href="manifest.json">

  <script>
@@ -39,21 +40,113 @@
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
 </head>
+
 <body>
+  <style>
+    body {
+      margin: 0;
+      background-color: #a600f9;
+      height: 100vh;
+      width: 100vw;
+      margin: 0px;
+    }
+
+    .main-content {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.4s ease-out;
+    }
+
+    img {
+      width: 300px;
+      height: 300px;
+      position: absolute;
+    }
+
+    .loader {
+      position: relative;
+      width: 250px;
+      height: 250px;
+      border-radius: 50%;
+      background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
+      animation: animate 1.2s linear infinite;
+    }
+
+    @keyframes animate {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    .loader span {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 60%;
+      background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
+    }
+
+    .loader span:nth-child(1) {
+      filter: blur(5px);
+    }
+
+    .loader span:nth-child(2) {
+      filter: blur(10px);
+    }
+
+    .loader span:nth-child(3) {
+      filter: blur(25px);
+    }
+
+    .loader span:nth-child(4) {
+      filter: blur(50px);
+    }
+
+    .loader:after {
+      content: "";
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      right: 10px;
+      bottom: 10px;
+      background: #191919;
+      border-radius: 50%;
+    }
+  </style>
+
  <script>
-    window.addEventListener('load', function(ev) {
+    function delay(time) {
+      return new Promise(resolve => setTimeout(resolve, time));
+    }
+
+    window.addEventListener('load', function (ev) {
+      var loaderContent = document.querySelector('#loader-content');
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
-        onEntrypointLoaded: function(engineInitializer) {
-          engineInitializer.initializeEngine().then(function(appRunner) {
+        onEntrypointLoaded: function (engineInitializer) {
+          engineInitializer.initializeEngine().then(async function (appRunner) {
+            loaderContent.style.opacity = 0;
+            await delay(400);
            appRunner.runApp();
          });
        }
      });
    });
  </script>
+
+  <div class="main-content" id="loader-content">
+    <img src="logo.png" alt="PCastTV Logo" />
+  </div>
 </body>
-</html>
+
+</html>
@@ -1,6 +1,6 @@
 {
-    "name": "lixo",
-    "short_name": "lixo",
+    "name": "pcasttv",
+    "short_name": "pcasttv",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#0175C2",