datacom
/
telnow_2025


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							<!DOCTYPE html>
<html>

<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="Datacom Solusindo">

  <!-- iOS meta tags & icons -->
  <meta name="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="TelNow Application">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

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

  <title>TelNow Application</title>
  <link rel="manifest" href="manifest.json">
  <style>
    .loader {
      border: 5px solid #f3f3f3;
      border-radius: 50%;
      border-top: 5px solid #01beb5;
      width: 40px;
      height: 40px;
      -webkit-animation: spin 2s linear infinite;
      /* Safari */
      animation: spin 2s linear infinite;
    }

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -60px;
      margin-left: -120px;
      width: 240px;
      height: 40px;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
    }

    .center-align {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 20px;
      margin-left: -60px;
      width: 40px;
      height: 40px;
    }

    .center-count {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -30px;
      margin-left: -120px;
      width: 240px;
      height: 40px;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
    }

    /* Safari */
    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .countdown {
      display: inline-block;
      text-indent: -100vw;
      position: relative;
      width: 1ch;
    }

    .countdown::after {
      content: '10';
      position: absolute;
      top: 0;
      left: 0;
      text-indent: 0;
      animation: 18s countdown 1s forwards;
    }

    @keyframes countdown {
      0% {
        content: '10';
      }

      10% {
        content: '9';
      }

      20% {
        content: '8';
      }

      30% {
        content: '7';
      }

      35% {
        content: '7';
      }

      40% {
        content: '6';
      }

      45% {
        content: '6';
      }

      50% {
        content: '5';
      }

      55% {
        content: '5';
      }

      60% {
        content: '4';
      }

      65% {
        content: '4';
      }

      70% {
        content: '3';
      }

      75% {
        content: '2';
      }

      80% {
        content: '2';
      }

      85% {
        content: '2';
      }

      90% {
        content: '1';
      }

      95% {
        content: '1';
      }

      100% {
        content: '0';
      }
    }
  </style>
</head>

<body>
  <script src="flutter_bootstrap.js" async></script>

  <div class="center">
    <h4 id="label">Loading TelNow page</h4>
  </div>
  <div class="center-align">
    <img src="cat.gif" width="120" height="120">
  </div>
  <div class="center-count">
    <span class="countdown"></span>
  </div>
  <script src="flutter_bootstrap.js" async></script>
</body>

</html>