Skip to content

Commit eaeee38

Browse files
NodeOOFNodeOOF
authored
install pwa page
1 parent c8f38d4 commit eaeee38

4 files changed

Lines changed: 87 additions & 26 deletions

File tree

‎install.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="fa" dir="rtl">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>نصب Today Plan</title>
7+
<meta name="theme-color" content="#3b82f6">
8+
<link rel="manifest" href="manifest.webmanifest">
9+
<link rel="stylesheet" href="css/style.css">
10+
<style>
11+
.install-container {
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
justify-content: center;
16+
height: 100vh;
17+
text-align: center;
18+
padding: 20px;
19+
}
20+
.app-logo {
21+
width: 120px;
22+
height: 120px;
23+
margin-bottom: 24px;
24+
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
25+
}
26+
.install-title {
27+
font-size: 1.5rem;
28+
font-weight: bold;
29+
margin-bottom: 12px;
30+
}
31+
.install-desc {
32+
color: var(--secondary-color);
33+
margin-bottom: 32px;
34+
line-height: 1.6;
35+
}
36+
#install-btn {
37+
width: 100%;
38+
max-width: 300px;
39+
padding: 16px;
40+
font-size: 1.1rem;
41+
}
42+
.ios-instruction {
43+
margin-top: 20px;
44+
padding: 15px;
45+
background: #e0f2fe;
46+
border-radius: 12px;
47+
font-size: 0.9rem;
48+
display: none;
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
<div class="install-container">
54+
<img src="assets/icons/icon.svg" alt="Today Plan Logo" class="app-logo">
55+
<h1 class="install-title">خوش آمدید به Today Plan</h1>
56+
<p class="install-desc">برای استفاده از تمامی امکانات و دسترسی سریع‌تر، اپلیکیشن را روی گوشی یا کامپیوتر خود نصب کنید.</p>
57+
58+
<button id="install-btn" class="btn primary">نصب اپلیکیشن</button>
59+
60+
<div id="ios-info" class="ios-instruction">
61+
برای نصب در آیفون: دکمه <span style="font-weight:bold">Share</span> را بزنید و سپس <span style="font-weight:bold">Add to Home Screen</span> را انتخاب کنید.
62+
</div>
63+
</div>
64+
65+
<script src="js/pwa.js"></script>
66+
<script>
67+
// چک کردن اینکه آیا از قبل نصب شده یا خیر
68+
if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true) {
69+
window.location.href = 'index.html';
70+
}
71+
</script>
72+
</body>
73+
</html>

‎js/pwa.js‎

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
});
1010
});
1111

12-
const banner = document.getElementById('install-banner');
1312
const installBtn = document.getElementById('install-btn');
13+
const iosInfo = document.getElementById('ios-info');
1414

1515
const isStandalone = () => {
1616
// iOS
@@ -19,51 +19,38 @@
1919
return !!(window.matchMedia && window.matchMedia('(display-mode: standalone)').matches);
2020
};
2121

22-
function showBanner() {
23-
if (!banner) return;
24-
banner.hidden = false;
25-
}
26-
27-
function hideBanner() {
28-
if (!banner) return;
29-
banner.hidden = true;
30-
}
31-
32-
// اگر اپ نصب شده و در حالت standalone اجرا شده، بنر نصب را نشان نده
33-
if (isStandalone()) {
34-
hideBanner();
22+
// اگر اپ نصب شده است، ریدایرکت به ایندکس
23+
if (isStandalone() && window.location.pathname.includes('install.html')) {
24+
window.location.href = 'index.html';
3525
return;
3626
}
3727

3828
window.addEventListener('beforeinstallprompt', (e) => {
3929
e.preventDefault();
4030
deferredPrompt = e;
41-
showBanner();
31+
if (installBtn) installBtn.style.display = 'block';
4232
});
4333

4434
window.addEventListener('appinstalled', () => {
4535
deferredPrompt = null;
46-
hideBanner();
36+
window.location.href = 'index.html';
4737
});
4838

4939
if (installBtn) {
5040
installBtn.addEventListener('click', async () => {
5141
if (!deferredPrompt) return;
5242
deferredPrompt.prompt();
53-
try {
54-
await deferredPrompt.userChoice;
55-
} finally {
43+
const { outcome } = await deferredPrompt.userChoice;
44+
if (outcome === 'accepted') {
5645
deferredPrompt = null;
57-
hideBanner();
5846
}
5947
});
6048
}
6149

62-
// iOS Safari: beforeinstallprompt وجود ندارد
50+
// iOS Safari
6351
const isIos = /iphone|ipad|ipod/i.test(navigator.userAgent);
64-
if (isIos && !isStandalone() && banner && installBtn) {
65-
banner.querySelector('.install-banner__text').textContent = 'برای نصب: Share → Add to Home Screen';
66-
installBtn.hidden = true;
67-
showBanner();
52+
if (isIos && !isStandalone() && iosInfo) {
53+
iosInfo.style.display = 'block';
54+
if (installBtn) installBtn.style.display = 'none';
6855
}
6956
})();

‎manifest.webmanifest‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "برنامه‌ریزی روزانه و هفتگی با تایمر و پیگیری پیشرفت",
55
"lang": "fa",
66
"dir": "rtl",
7-
"start_url": "./index.html",
7+
"start_url": "./install.html",
88
"scope": "./",
99
"display": "standalone",
1010
"background_color": "#f8fafc",

‎sw.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const CACHE_NAME = 'today-plan-v1';
33
const APP_SHELL = [
44
'./',
55
'./index.html',
6+
'./install.html',
67
'./weekly.html',
78
'./settings.html',
89
'./css/style.css',

0 commit comments

Comments
 (0)