https://my-telegram-app-82g.pages.dev/

1<!DOCTYPE html>
2<html>
3
4<head>
5  <!--
6    If you are serving your web app in a path other than the root, change the
7    href value below to reflect the base path you are serving from.
8
9    The path provided below has to start and end with a slash "/" in order for
10    it to work correctly.
11
12    For more details:
13    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
14
15    This is a placeholder for base href that will be replaced by the value of
16    the `--base-href` argument provided to `flutter build`.
17  -->
18  <base href="/">
19
20  <meta charset="UTF-8">
21  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
22  <meta name="description" content="A new Flutter project.">
23
24  <!-- iOS meta tags & icons -->
25  <meta name="mobile-web-app-capable" content="yes">
26  <meta name="apple-mobile-web-app-status-bar-style" content="black">
27  <meta name="apple-mobile-web-app-title" content="zad_al_muttaqin">
28  <link rel="apple-touch-icon" href="icons/Icon-192.png">
29
30  <!-- Favicon -->
31  <link rel="icon" type="image/png" href="favicon.png">
32
33  <title>أنيس الصائمين</title>
34  <link rel="manifest" href="manifest.json">
35  

35<script src="telegram-web-app.js"></script>

35
36  

36<script>
37    // Initialize Telegram WebApp
38    if (window.Telegram && window.Telegram.WebApp) {
39      const webApp = window.Telegram.WebApp;
40      webApp.ready();
41      webApp.expand(); // Expand to full height
42
43      // Disable vertical swipe-to-close gesture if supported
44      if (webApp.disableVerticalSwipes) {
45        webApp.disableVerticalSwipes();
46      }
47    }
48  </script>

48
49
50
51  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
52
53
54  <style id="splash-screen-style">
55    html {
56      height: 100%
57    }
58
59    body {
60      margin: 0;
61      min-height: 100%;
62      background-color: #12261E;
63      background-size: 100% 100%;
64    }
65
66    .center {
67      margin: 0;
68      position: absolute;
69      top: 50%;
70      left: 50%;
71      -ms-transform: translate(-50%, -50%);
72      transform: translate(-50%, -50%);
73    }
74
75    /* Logo Shimmer Animation */
76    .logo-container {
77      width: 200px;
78      height: 120px;
79      /* Reduced height to fit with top logo */
80      overflow: hidden;
81    }
82
83    .splash-top-logo {
84      width: 100px;
85      height: 100px;
86      margin-bottom: 20px;
87      object-fit: contain;
88      animation: fadeScale 1.5s ease-out;
89    }
90
91    @keyframes fadeScale {
92      from {
93        opacity: 0;
94        transform: scale(0.9);
95      }
96
97      to {
98        opacity: 1;
99        transform: scale(1);
100      }
101    }
102
103    .splash-wrapper {
104      display: flex;
105      flex-direction: column;
106      align-items: center;
107      justify-content: center;
108    }
109
110    .shimmer-logo {
111      width: 100%;
112      height: 100%;
113      /* Golden base with a moving bright shine */
114      background: linear-gradient(120deg,
115          #D4AF37 30%,
116          #FFF 45%,
117          #FFF 55%,
118          #D4AF37 70%);
119      background-size: 200% 100%;
120      background-position: -50% 0;
121      /* Start from left */
122
123      /* Use logo as mask */
124      -webkit-mask-image: url("splash/img/light-1x.png");
125      mask-image: url("splash/img/light-1x.png");
126      -webkit-mask-size: contain;
127      mask-size: contain;
128      -webkit-mask-repeat: no-repeat;
129      mask-repeat: no-repeat;
130      -webkit-mask-position: center;
131      mask-position: center;
132
133      animation: shine 2.5s infinite linear;
134    }
135
136    @keyframes shine {
137      0% {
138        background-position: -50% 0;
139      }
140
141      100% {
142        background-position: 150% 0;
143      }
144    }
145
146    .contain {
147      display: block;
148      width: 100%;
149      height: 100%;
150      object-fit: contain;
151    }
152
153    .stretch {
154      display: block;
155      width: 100%;
156      height: 100%;
157    }
158
159    .cover {
160      display: block;
161      width: 100%;
162      height: 100%;
163      object-fit: cover;
164    }
165
166    .bottom {
167      position: absolute;
168      bottom: 0;
169      left: 50%;
170      -ms-transform: translate(-50%, 0);
171      transform: translate(-50%, 0);
172    }
173
174    .bottomLeft {
175      position: absolute;
176      bottom: 0;
177      left: 0;
178    }
179
180    .bottomRight {
181      position: absolute;
182      bottom: 0;
183      right: 0;
184    }
185  </style>
186  

186<script id="splash-screen-script">
187    function removeSplashFromWeb() {
188      const splash = document.getElementById("splash");
189      if (splash) {
190        splash.style.opacity = "0";
191        splash.style.transition = "opacity 0.5s ease";
192        setTimeout(() => splash.remove(), 500);
193      }
194      document.body.style.background = "transparent";
195    }
196  </script>

196
197</head>
198
199<body>
200  <div id="splash" class="center splash-wrapper">
201    <img src="splash/img/office.png" class="splash-top-logo" alt="Office Logo">
202    <div class="logo-container">
203      <div class="shimmer-logo"></div>
204    </div>
205  </div>
206
207
208  

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

208
209
210
211
212
213</body>
214
215</html>