├── tutorials ├── amazon-tutorial.html ├── phonepe-tutorial.html └── whatsapp-tutorial.html ├── images ├── preview.png ├── send-money-phonepe │ ├── home.png │ ├── pay.png │ ├── send-money.png │ ├── search-contact.png │ └── select-contact.png └── video-call-whatsapp │ ├── chat.png │ └── home.png ├── LICENSE ├── README.md ├── about.html ├── styles.css ├── index.html └── js └── localization.js /tutorials/amazon-tutorial.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pankajtanwarbanna/teach-your-parents-smartphone/HEAD/images/preview.png -------------------------------------------------------------------------------- /images/send-money-phonepe/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pankajtanwarbanna/teach-your-parents-smartphone/HEAD/images/send-money-phonepe/home.png -------------------------------------------------------------------------------- /images/send-money-phonepe/pay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pankajtanwarbanna/teach-your-parents-smartphone/HEAD/images/send-money-phonepe/pay.png -------------------------------------------------------------------------------- /images/video-call-whatsapp/chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pankajtanwarbanna/teach-your-parents-smartphone/HEAD/images/video-call-whatsapp/chat.png -------------------------------------------------------------------------------- /images/video-call-whatsapp/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pankajtanwarbanna/teach-your-parents-smartphone/HEAD/images/video-call-whatsapp/home.png -------------------------------------------------------------------------------- /images/send-money-phonepe/send-money.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pankajtanwarbanna/teach-your-parents-smartphone/HEAD/images/send-money-phonepe/send-money.png -------------------------------------------------------------------------------- /images/send-money-phonepe/search-contact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pankajtanwarbanna/teach-your-parents-smartphone/HEAD/images/send-money-phonepe/search-contact.png -------------------------------------------------------------------------------- /images/send-money-phonepe/select-contact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pankajtanwarbanna/teach-your-parents-smartphone/HEAD/images/send-money-phonepe/select-contact.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Pankaj Tanwar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Teach Your Parents Smartphone 📱 2 | 3 | A simple application with step-by-step practice guide to help parents learn essential mobile apps. 4 | 5 | ## Why I Created This 6 | 7 | I recently visited my parents. Everything was fine until one morning my mom started blaming me for "doing something" to their phone. [PhonePe](https://www.phonepe.com/) had updated its design overnight, and both of them were confused. I spent an hour patiently teaching them the new interface step by step. That trip, I also ended up showing them how to make a video call on WhatsApp. 8 | 9 | After I returned to Bangalore, it hit me: I won’t always be around to sit next to them and help. And honestly, explaining things over a phone call never really works. It wasn’t just them. I’ve seen this happen with my friends’ parents too. We teach them, but since they don’t get to practice, they forget and then feel frustrated or even embarrassed to ask again. 10 | 11 | That’s when I decided to build this tool. 12 | 13 | It's simple. It lets my parents (or anyone, really), practice using apps like PhonePe, WhatsApp through step-by-step tutorials on their own. It can be practiced as many times as needed, without anyone rushing or judging them. Whether it’s a complex flow or a basic feature, they can revisit it anytime. It’s even helpful for me. I can teach them features they’ve never used before, like downloading bank statements, sending a voice note or adjust WhatsApp settings, from miles away. 14 | 15 | I built this so my parents can feel a little more confident, a little more independent, and a little less scared of technology. Because sometimes, all they need is a safe space to practice. 16 | 17 | ## Features 18 | 19 | - Simple, clear step-by-step instructions 20 | - Localization Support available in English and Hindi with easy extensibility for additional languages 21 | - Visual guides with highlighted clickable areas 22 | - Interactive Practice mode 23 | - Works for various essential apps (PhonePe, WhatsApp, etc.) 24 | 25 | ## How To Use 26 | 27 | - Choose a tutorial from the home page 28 | - Follow the step-by-step instructions 29 | - Practice in a safe environment 30 | - Learn at your own pace 31 | 32 | ## Technologies Used 33 | 34 | - HTML/CSS/JavaScript 35 | - No frameworks or dependencies 36 | - Works in any modern browser 37 | 38 | ## Built with ❤️ by 39 | 40 | [Pankaj Tanwar](https://twitter.com/the2ndfloorguy), and checkout his [other side-hustles](https://pankajtanwar.in/side-hustles) 41 | 42 | ## Contributing 43 | 44 | I welcome contributions to the `teach-your-parents-smartphone` project! Whether it's a bug fix, a feature request, or improving documentation, your contributions are appreciated. -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About - Teach Your Parents Smartphone 7 | 8 | 71 | 72 | 73 |
74 |
75 |

About

76 |

The story behind building this tiny tool for my parents

77 | 78 |

Why I Built This

79 |

I recently visited my parents. Everything was fine until one morning my mom started blaming me for "doing something" to their phone. PhonePe had updated its design overnight, and both of them were confused. I spent an hour patiently teaching them the new interface step by step. That trip, I also ended up showing them how to make a video call on WhatsApp.

80 | 81 |

After I returned to Bangalore, it hit me: I won't always be around to sit next to them and help. And honestly, explaining things over a phone call never really works. It wasn't just them. I've seen this happen with my friends' parents too. We teach them, but since they don't get to practice, they forget and then feel frustrated or even embarrassed to ask again.

82 | 83 |

That's when I decided to build this tool.

84 | 85 |

It's simple. It lets my parents (or anyone, really), practice using apps like PhonePe, WhatsApp through step-by-step tutorials on their own. It can be practiced as many times as needed, without anyone rushing or judging them. Whether it's a complex flow or a basic feature, they can revisit it anytime. It's even helpful for me. I can teach them features they've never used before, like downloading bank statements, sending a voice note or adjust WhatsApp settings, from miles away.

86 | 87 |

I built this so my parents can feel a little more confident, a little more independent, and a little less scared of technology. Because sometimes, all they need is a safe space to practice.

88 | 89 |

Who Am I?

90 |

My name is Pankaj Tanwar. I build simple tools to solve everyday problems.

91 |

You can find me on Twitter or check out my other projects.

92 | 93 |

Feedback

94 |

If you have suggestions or feedback, I'd love to hear them.

95 |

This project is open-sourced on GitHub. Please reach out to me on Twitter or raise on GitHub.

96 | 97 | ← Back to Home 98 |
99 | 100 |
101 | Built with ❤️ by Pankaj Tanwar 102 |
103 |
104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #5f259f; 3 | --primary-light: #e6e0ed; 4 | --primary-dark: #4a1c7b; 5 | --success: #4CAF50; 6 | --success-light: #e8f5e9; 7 | --warning: #ff9800; 8 | --danger: #f44336; 9 | --text-dark: #333; 10 | --text-light: #666; 11 | --background: #f5f5f5; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | margin: 0; 17 | padding: 0; 18 | } 19 | 20 | body { 21 | font-family: 'Arial', sans-serif; 22 | margin: 0; 23 | padding: 0; 24 | background-color: var(--background); 25 | color: var(--text-dark); 26 | line-height: 1.6; 27 | } 28 | 29 | .container { 30 | max-width: 1200px; 31 | margin: 0 auto; 32 | padding: 20px; 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | } 37 | 38 | h1 { 39 | color: var(--primary); 40 | text-align: center; 41 | margin: 30px 0; 42 | font-size: 32px; 43 | } 44 | 45 | h2 { 46 | color: var(--primary); 47 | text-align: center; 48 | margin-bottom: 15px; 49 | font-size: 24px; 50 | } 51 | 52 | .welcome-container { 53 | max-width: 800px; 54 | text-align: center; 55 | margin: 20px auto 40px; 56 | } 57 | 58 | .welcome-subheading { 59 | color: var(--text-light); 60 | margin-bottom: 30px; 61 | font-size: 18px; 62 | } 63 | 64 | .tutorial-grid { 65 | display: grid; 66 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 67 | gap: 25px; 68 | margin: 30px 0; 69 | width: 100%; 70 | } 71 | 72 | .tutorial-card { 73 | background-color: white; 74 | border-radius: 10px; 75 | overflow: hidden; 76 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 77 | transition: transform 0.3s, box-shadow 0.3s; 78 | cursor: pointer; 79 | } 80 | 81 | .tutorial-card:hover { 82 | transform: translateY(-5px); 83 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 84 | } 85 | 86 | .card-link { 87 | text-decoration: none; 88 | color: inherit; 89 | display: block; 90 | } 91 | 92 | .card-image { 93 | height: 180px; 94 | background-color: var(--primary-light); 95 | display: flex; 96 | align-items: center; 97 | justify-content: center; 98 | } 99 | 100 | .app-icon { 101 | width: 80px; 102 | height: 80px; 103 | border-radius: 15px; 104 | display: flex; 105 | align-items: center; 106 | justify-content: center; 107 | font-size: 36px; 108 | color: white; 109 | } 110 | 111 | .card-content { 112 | padding: 20px; 113 | } 114 | 115 | .card-title { 116 | font-size: 20px; 117 | font-weight: bold; 118 | margin-bottom: 10px; 119 | color: var(--primary); 120 | } 121 | 122 | .card-description { 123 | color: var(--text-light); 124 | margin-bottom: 15px; 125 | } 126 | 127 | .card-button { 128 | display: inline-block; 129 | padding: 8px 20px; 130 | background-color: var(--primary); 131 | color: white; 132 | border: none; 133 | border-radius: 20px; 134 | text-decoration: none; 135 | font-weight: bold; 136 | transition: background-color 0.3s; 137 | cursor: pointer; 138 | } 139 | 140 | .card-button:hover { 141 | background-color: var(--primary-dark); 142 | } 143 | 144 | /* Tutorial-specific styles */ 145 | .instructions { 146 | background-color: var(--primary-light); 147 | border-left: 5px solid var(--primary); 148 | padding: 20px; 149 | margin-bottom: 20px; 150 | border-radius: 5px; 151 | max-width: 600px; 152 | font-size: 18px; 153 | } 154 | 155 | .phone-container { 156 | position: relative; 157 | width: 340px; 158 | height: 680px; 159 | border: 12px solid #333; 160 | border-radius: 36px; 161 | overflow: hidden; 162 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); 163 | background-color: white; 164 | margin-bottom: 30px; 165 | } 166 | 167 | .screen { 168 | position: absolute; 169 | top: 0; 170 | left: 0; 171 | width: 100%; 172 | height: 100%; 173 | background-color: #fff; 174 | transition: opacity 0.5s ease; 175 | overflow: hidden; 176 | } 177 | 178 | .screen.hidden { 179 | opacity: 0; 180 | pointer-events: none; 181 | } 182 | 183 | .screenshot { 184 | width: 100%; 185 | height: 100%; 186 | object-fit: cover; 187 | } 188 | 189 | .clickable-area { 190 | position: absolute; 191 | background-color: rgba(95, 37, 159, 0); 192 | /* Transparent initially */ 193 | border: 2px solid rgba(95, 37, 159, 0); 194 | /* Transparent initially */ 195 | cursor: pointer; 196 | z-index: 10; 197 | transition: all 0.3s ease; 198 | } 199 | 200 | /* For debug mode - show clickable areas */ 201 | .debug-mode .clickable-area { 202 | background-color: rgba(95, 37, 159, 0.2); 203 | border: 2px dashed #5f259f; 204 | } 205 | 206 | .clickable-area:hover { 207 | background-color: rgba(95, 37, 159, 0.1); 208 | } 209 | 210 | .clickable-area.highlight { 211 | animation: pulse 1.5s infinite; 212 | } 213 | 214 | .feedback { 215 | position: absolute; 216 | background-color: var(--success); 217 | color: white; 218 | padding: 15px; 219 | border-radius: 10px; 220 | font-size: 16px; 221 | max-width: 250px; 222 | text-align: center; 223 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 224 | z-index: 20; 225 | opacity: 0; 226 | transition: opacity 0.5s ease; 227 | } 228 | 229 | .tutorial-controls { 230 | display: flex; 231 | gap: 15px; 232 | margin-bottom: 30px; 233 | flex-wrap: wrap; 234 | justify-content: center; 235 | } 236 | 237 | button { 238 | padding: 12px 24px; 239 | background-color: var(--primary); 240 | color: white; 241 | border: none; 242 | border-radius: 25px; 243 | cursor: pointer; 244 | font-size: 16px; 245 | font-weight: bold; 246 | transition: background-color 0.3s; 247 | } 248 | 249 | button:hover { 250 | background-color: var(--primary-dark); 251 | } 252 | 253 | button:disabled { 254 | background-color: #cccccc; 255 | cursor: not-allowed; 256 | } 257 | 258 | .primary-button { 259 | background-color: var(--success); 260 | font-size: 18px; 261 | padding: 15px 40px; 262 | } 263 | 264 | .primary-button:hover { 265 | background-color: #3d8b40; 266 | } 267 | 268 | #hint-button { 269 | background-color: var(--warning); 270 | } 271 | 272 | #hint-button:hover { 273 | background-color: #e68a00; 274 | } 275 | 276 | #debug-toggle { 277 | background-color: var(--danger); 278 | } 279 | 280 | #debug-toggle:hover { 281 | background-color: #d32f2f; 282 | } 283 | 284 | .progress-indicator { 285 | display: flex; 286 | justify-content: center; 287 | margin-bottom: 20px; 288 | gap: 10px; 289 | } 290 | 291 | .progress-dot { 292 | width: 12px; 293 | height: 12px; 294 | background-color: #ddd; 295 | border-radius: 50%; 296 | transition: background-color 0.3s; 297 | } 298 | 299 | .progress-dot.active { 300 | background-color: var(--primary); 301 | } 302 | 303 | .task-complete { 304 | background-color: var(--success-light); 305 | border: 1px solid var(--success); 306 | color: #2E7D32; 307 | padding: 20px; 308 | border-radius: 10px; 309 | text-align: center; 310 | margin-top: 20px; 311 | max-width: 600px; 312 | display: none; 313 | margin-bottom: 20px; 314 | } 315 | 316 | .back-home { 317 | margin-top: 20px; 318 | display: inline-block; 319 | } 320 | 321 | @keyframes pulse { 322 | 0% { 323 | box-shadow: 0 0 0 0 rgba(95, 37, 159, 0.7); 324 | } 325 | 326 | 70% { 327 | box-shadow: 0 0 0 10px rgba(95, 37, 159, 0); 328 | } 329 | 330 | 100% { 331 | box-shadow: 0 0 0 0 rgba(95, 37, 159, 0); 332 | } 333 | } 334 | 335 | /* Responsive adjustments */ 336 | @media (max-width: 768px) { 337 | .tutorial-grid { 338 | grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 339 | } 340 | } 341 | 342 | @media (max-width: 500px) { 343 | .phone-container { 344 | width: 300px; 345 | height: 600px; 346 | } 347 | 348 | .instructions { 349 | font-size: 16px; 350 | padding: 15px; 351 | } 352 | 353 | button { 354 | padding: 10px 20px; 355 | font-size: 14px; 356 | } 357 | } 358 | 359 | .language-selector { 360 | position: absolute; 361 | top: 20px; 362 | right: 20px; 363 | z-index: 100; 364 | } 365 | 366 | .language-selector select { 367 | padding: 8px 10px; 368 | border: 1px solid #ddd; 369 | border-radius: 4px; 370 | background-color: white; 371 | font-size: 14px; 372 | color: #333; 373 | cursor: pointer; 374 | } 375 | 376 | /* RTL language support */ 377 | [dir="rtl"] .about-link svg { 378 | margin-right: 0; 379 | margin-left: 5px; 380 | } 381 | 382 | /* Responsive adjustment to single column on very small screens */ 383 | @media (max-width: 600px) { 384 | .tutorial-grid { 385 | grid-template-columns: 1fr; 386 | } 387 | 388 | .language-selector { 389 | top: 10px; 390 | right: 10px; 391 | } 392 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Teach your parents smartphone - Simple App Learning Guide 8 | 10 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 28 | 29 | 30 | 31 | 32 | 33 | 40 | 112 | 113 | 114 | 115 |
116 |

Teach your parents smartphone

117 | 118 | 119 | 120 | 122 | 123 | 124 | Why I built this? 125 | 126 | 127 |
128 |

Learn how to use popular apps with step-by-step 129 | practice guide.

130 | 131 |
132 | 133 |
134 | 135 |
136 |
💸
137 |
138 |
139 |
Send Money on PhonePe
140 |

Learn how to send money to 141 | a mobile number using PhonePe app. 142 |

143 | 144 |
145 | 146 |
147 | 148 | 149 |
150 | 151 |
152 |
📱
153 |
154 |
155 |
Use WhatsApp Video Call
156 |

Learn how to make video 157 | calls to family and friends.

158 | 160 |
161 | 162 |
163 | 164 | 165 |
166 |
167 |
⚡
168 |
169 |
170 |
Pay Electricity Bill
171 |

Learn how to pay your 172 | electricity bill using PhonePe or BBPS.

173 | 175 |
176 |
177 | 178 | 179 |
180 |
181 |
🚕
182 |
183 |
184 |
Book an Ola/Uber Ride
185 |

Learn how to book a cab and track 186 | your driver.

187 | 189 |
190 |
191 | 192 | 193 |
194 |
195 |
🗺️
196 |
197 |
198 |
Navigate with Google Maps
199 |

Learn how to find directions and 200 | navigate to new places.

201 | 203 |
204 |
205 | 206 | 207 |
208 |
209 |
🚂
210 |
211 |
212 |
Book Train Tickets
213 |

Learn how to book train tickets 214 | using the IRCTC app.

215 | 217 |
218 |
219 |
220 |
221 | 222 | 233 |
234 | 235 | 236 | 237 | 238 | -------------------------------------------------------------------------------- /tutorials/phonepe-tutorial.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | PhonePe Money Transfer Tutorial - Teach your parents smartphone 8 | 9 | 137 | 138 | 139 | 140 |
141 |

Sending Money on PhonePe

142 | 143 | 144 |
145 | Step 1: This is the PhonePe home screen. To send money to someone, tap on the "To mobile 146 | number" option under Money Transfers. This lets you send money to any phone number in India. 147 |
148 | 149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 | 157 |
158 | 159 |
160 | 161 | PhonePe Home Screen 163 | 164 | 165 |
166 |
167 | 168 | 171 |
172 | 173 | 174 | 190 | 191 | 192 | 206 | 207 | 208 | 222 | 223 | 224 | 238 | 239 | 240 | 254 |
255 | 256 |
257 | Congratulations! You've successfully learned how to send money to a 258 | mobile number using PhonePe. 259 |

260 | 262 |
263 | 264 |
265 | 266 | 267 | 268 | 269 |
270 | 271 | ← Back to Home 272 |
273 | 274 | 275 | 276 | 277 | 545 | 546 | 547 | -------------------------------------------------------------------------------- /js/localization.js: -------------------------------------------------------------------------------- 1 | // Available languages 2 | const LANGUAGES = { 3 | en: { 4 | name: 'English', 5 | nativeName: 'English', 6 | dir: 'ltr' 7 | }, 8 | hi: { 9 | name: 'Hindi', 10 | nativeName: 'हिंदी', 11 | dir: 'ltr' 12 | } 13 | // Add more languages here as needed 14 | }; 15 | 16 | const DEFAULT_LANGUAGE = 'en'; 17 | let currentLanguage = DEFAULT_LANGUAGE; 18 | 19 | const TRANSLATIONS = { 20 | // ENGLISH TRANSLATIONS 21 | "en": { 22 | // Common translations (used across all pages) 23 | "common": { 24 | "nav.home": "Home", 25 | "nav.about": "About", 26 | "footer.built": "Built with ❤️ by", 27 | "footer.about": "About This Project", 28 | "footer.github": "GitHub", 29 | "button.startTutorial": "Start Tutorial", 30 | "button.comingSoon": "Coming Soon", 31 | "button.tryAgain": "Try Again", 32 | "button.back": "Back to Home", 33 | "button.previous": "Previous Step", 34 | "button.hint": "Show Hint", 35 | "button.reset": "Start Over", 36 | "button.debug": "Show Clickable Areas", 37 | "button.hideDebug": "Hide Clickable Areas" 38 | }, 39 | 40 | // Home page translations 41 | "home": { 42 | "page.title": "Teach your parents smartphone - Simple App Learning Guide", 43 | "meta.description": "Easy step-by-step practice guide to help parents and seniors learn essential smartphone apps like PhonePe, WhatsApp, Google Maps, and more.", 44 | 45 | "home.title": "Teach your parents smartphone", 46 | "home.why": "Why I built this?", 47 | "home.subheading": "Learn how to use popular apps with step-by-step practice guide.", 48 | 49 | "card.phonepe.title": "Send Money on PhonePe", 50 | "card.phonepe.description": "Learn how to send money to a mobile number using PhonePe app.", 51 | 52 | "card.whatsapp.title": "Use WhatsApp Video Call", 53 | "card.whatsapp.description": "Learn how to make video calls to family and friends.", 54 | 55 | "card.electricity.title": "Pay Electricity Bill", 56 | "card.electricity.description": "Learn how to pay your electricity bill using PhonePe or BBPS.", 57 | 58 | "card.ride.title": "Book an Ola/Uber Ride", 59 | "card.ride.description": "Learn how to book a cab and track your driver.", 60 | 61 | "card.maps.title": "Navigate with Google Maps", 62 | "card.maps.description": "Learn how to find directions and navigate to new places.", 63 | 64 | "card.train.title": "Book Train Tickets", 65 | "card.train.description": "Learn how to book train tickets using the IRCTC app." 66 | }, 67 | 68 | // About page translations 69 | "about": { 70 | "page.title": "About - Teach Your Parents Smartphone", 71 | "about.title": "About", 72 | "about.subheading": "The story behind building this tiny tool for my parents", 73 | "about.whyBuilt.title": "Why I Built This", 74 | "about.whyBuilt.p1": "I recently visited my parents. Everything was fine until one morning my mom started blaming me for \"doing something\" to their phone. PhonePe had updated its design overnight, and both of them were confused. I spent an hour patiently teaching them the new interface step by step. That trip, I also ended up showing them how to make a video call on WhatsApp.", 75 | "about.whyBuilt.p2": "After I returned to Bangalore, it hit me: I won't always be around to sit next to them and help. And honestly, explaining things over a phone call never really works. It wasn't just them. I've seen this happen with my friends' parents too. We teach them, but since they don't get to practice, they forget and then feel frustrated or even embarrassed to ask again.", 76 | "about.whyBuilt.p3": "That's when I decided to build this tool.", 77 | "about.whyBuilt.p4": "It's simple. It lets my parents (or anyone, really), practice using apps like PhonePe, WhatsApp through step-by-step tutorials on their own. It can be practiced as many times as needed, without anyone rushing or judging them. Whether it's a complex flow or a basic feature, they can revisit it anytime. It's even helpful for me. I can teach them features they've never used before, like downloading bank statements, sending a voice note or adjust WhatsApp settings, from miles away.", 78 | "about.whyBuilt.p5": "I built this so my parents can feel a little more confident, a little more independent, and a little less scared of technology. Because sometimes, all they need is a safe space to practice.", 79 | "about.whoAmI.title": "Who Am I?", 80 | "about.whoAmI.p1": "My name is Pankaj Tanwar. I build simple tools to solve everyday problems.", 81 | "about.whoAmI.p2": "You can find me on Twitter or check out my other projects.", 82 | "about.feedback.title": "Feedback", 83 | "about.feedback.p1": "If you have suggestions or feedback, I'd love to hear them.", 84 | "about.feedback.p2": "This project is open-sourced on GitHub. Please reach out to me on Twitter or raise on GitHub." 85 | }, 86 | 87 | // PhonePe tutorial translations 88 | "phonepe": { 89 | "page.title": "PhonePe Money Transfer Tutorial - Teach your parents smartphone", 90 | 91 | "tutorial.title": "Sending Money on PhonePe", 92 | "tutorial.completion": "Congratulations! You've successfully learned how to send money to a mobile number using PhonePe.", 93 | 94 | "step1.instruction": "Step 1: This is the PhonePe home screen. To send money to someone, tap on the \"To mobile number\" option under Money Transfers. This lets you send money to any phone number in India.", 95 | "step2.instruction": "Step 2: You're now in the Send Money screen. Here you can see your recent payments. To make a new payment, tap on the purple \"New Payment\" button at the bottom of your screen.", 96 | "step3.instruction": "Step 3: Now you can select a contact. Tap on the search box at the top to enter a phone number or search for a contact.", 97 | "step4.instruction": "Step 4: Type the phone number or select a contact from the list. Tap on the contact you want to send money to.", 98 | "step5.instruction": "Step 5: Now enter the amount you want to send. Then tap \"Pay\" to proceed. After this, you'll need to enter your UPI PIN to complete the transaction.", 99 | 100 | "feedback.home": "Good job! Now you'll see the Send Money screen.", 101 | "feedback.sendmoney": "Perfect! You've selected New Payment. Now you'll see contact numbers.", 102 | "feedback.selectcontact": "Great! You've selected to enter the contact number.", 103 | "feedback.searchcontact": "Great! You've selected the contact number to make a new payment.", 104 | "feedback.pay": "Awesome! Post this, just enter UPI PIN to complete the payment.", 105 | 106 | "completion.success": "Payment Successful!", 107 | "completion.message": "₹1 sent to Ashish" 108 | }, 109 | 110 | // WhatsApp tutorial translations 111 | "whatsapp": { 112 | "page.title": "WhatsApp Video Call Tutorial - Teach your parents smartphone", 113 | 114 | "tutorial.title": "Making a Video Call on WhatsApp", 115 | "tutorial.completion": "Congratulations! You've successfully learned how to make a video call on WhatsApp.", 116 | 117 | "step1.instruction": "Step 1: This is your WhatsApp chats list. All your conversations appear here. To make a video call, first tap on the contact you want to call. In this example, tap on \"Random Aunty\".", 118 | "step2.instruction": "Step 2: Now you're in the chat screen where you can see your messages with this contact. Look at the top right corner of the screen. Tap on the video camera icon to start a video call.", 119 | "step3.instruction": "Step 3: Your video call is now connected! You can see the other person in the main screen and yourself in the small window at the top right. When you want to end the call, tap the red button with an X in the middle at the bottom of the screen.", 120 | 121 | "feedback.home": "Good job! Now you'll see the chat screen for this contact.", 122 | "feedback.chat": "Perfect! You've clicked the video call button. Your call is connecting.", 123 | "feedback.call": "Well done! You've ended the call by pressing the red button.", 124 | 125 | "completion.success": "Call Completed!", 126 | "completion.message": "You've successfully made a WhatsApp video call" 127 | } 128 | }, 129 | 130 | // HINDI TRANSLATIONS 131 | "hi": { 132 | // Common translations 133 | "common": { 134 | "nav.home": "मुख्य पृष्ठ", 135 | "nav.about": "परिचय", 136 | "footer.built": "❤️ के साथ बनाया गया", 137 | "footer.about": "इस प्रोजेक्ट के बारे में", 138 | "footer.github": "गिटहब", 139 | "button.startTutorial": "ट्यूटोरियल शुरू करें", 140 | "button.comingSoon": "जल्द आ रहा है", 141 | "button.tryAgain": "फिर से प्रयास करें", 142 | "button.back": "मुख्य पृष्ठ पर वापस जाएं", 143 | "button.previous": "पिछला चरण", 144 | "button.hint": "संकेत दिखाएं", 145 | "button.reset": "फिर से शुरू करें", 146 | "button.debug": "क्लिक करने योग्य क्षेत्र दिखाएं", 147 | "button.hideDebug": "क्लिक करने योग्य क्षेत्र छिपाएं" 148 | }, 149 | 150 | // Home page translations 151 | "home": { 152 | "page.title": "अपने माता-पिता को स्मार्टफोन सिखाएं - सरल ऐप शिक्षण गाइड", 153 | "meta.description": "माता-पिता और बुजुर्गों को PhonePe, WhatsApp, गूगल मैप्स जैसे आवश्यक स्मार्टफोन ऐप्स सीखने में मदद करने के लिए आसान चरण-दर-चरण अभ्यास गाइड।", 154 | 155 | "home.title": "अपने माता-पिता को स्मार्टफोन सिखाएं", 156 | "home.why": "मैंने इसे क्यों बनाया?", 157 | "home.subheading": "चरण-दर-चरण अभ्यास गाइड के साथ लोकप्रिय ऐप्स का उपयोग करना सीखें।", 158 | 159 | "card.phonepe.title": "PhonePe पर पैसे भेजें", 160 | "card.phonepe.description": "PhonePe का उपयोग करके मोबाइल नंबर पर पैसे भेजना सीखें।", 161 | 162 | "card.whatsapp.title": "WhatsApp वीडियो कॉल का उपयोग करें", 163 | "card.whatsapp.description": "परिवार और दोस्तों को वीडियो कॉल करना सीखें।", 164 | 165 | "card.electricity.title": "बिजली बिल का भुगतान करें", 166 | "card.electricity.description": "PhonePe या BBPS का उपयोग करके अपना बिजली बिल कैसे भुगतान करें यह सीखें।", 167 | 168 | "card.ride.title": "ओला/उबर राइड बुक करें", 169 | "card.ride.description": "कैब बुक करना और अपने ड्राइवर को ट्रैक करना सीखें।", 170 | 171 | "card.maps.title": "गूगल मैप्स के साथ नेविगेट करें", 172 | "card.maps.description": "दिशाएँ खोजना और नए स्थानों पर जाना सीखें।", 173 | 174 | "card.train.title": "ट्रेन टिकट बुक करें", 175 | "card.train.description": "IRCTC ऐप का उपयोग करके ट्रेन टिकट बुक करना सीखें।" 176 | }, 177 | 178 | // About page translations (complete) 179 | "about": { 180 | "page.title": "परिचय - अपने माता-पिता को स्मार्टफोन सिखाएं", 181 | "about.title": "परिचय", 182 | "about.subheading": "अपने माता-पिता के लिए इस छोटे उपकरण को बनाने के पीछे की कहानी", 183 | "about.whyBuilt.title": "मैंने इसे क्यों बनाया", 184 | "about.whyBuilt.p1": "मैं हाल ही में अपने माता-पिता से मिलने गया था। सब कुछ ठीक था जब तक एक सुबह मेरी माँ ने मुझे उनके फोन के साथ \"कुछ करने\" का आरोप लगाना शुरू नहीं किया। PhonePe ने रातोंरात अपना डिज़ाइन अपडेट कर दिया था, और वे दोनों भ्रमित थे। मैंने धैर्यपूर्वक एक घंटे तक उन्हें नए इंटरफेस को चरण-दर-चरण सिखाया। उस यात्रा में, मैंने उन्हें WhatsApp पर वीडियो कॉल करना भी सिखाया।", 185 | "about.whyBuilt.p2": "बैंगलोर लौटने के बाद, मुझे एहसास हुआ: मैं हमेशा उनके पास बैठकर मदद करने के लिए नहीं रहूंगा। और सच कहूं तो, फोन कॉल पर चीजों को समझाना कभी भी वास्तव में काम नहीं करता। यह सिर्फ वे ही नहीं थे। मैंने अपने दोस्तों के माता-पिता के साथ भी ऐसा होते देखा है। हम उन्हें सिखाते हैं, लेकिन चूंकि उन्हें अभ्यास करने का मौका नहीं मिलता, वे भूल जाते हैं और फिर निराश महसूस करते हैं या फिर से पूछने में शर्म महसूस करते हैं।", 186 | "about.whyBuilt.p3": "तभी मैंने इस टूल को बनाने का फैसला किया।", 187 | "about.whyBuilt.p4": "यह सरल है। यह मेरे माता-पिता (या वास्तव में, किसी को भी) PhonePe, WhatsApp जैसे ऐप्स का उपयोग अपने आप चरण-दर-चरण ट्यूटोरियल के माध्यम से अभ्यास करने देता है। इसका अभ्यास जितनी बार चाहें किया जा सकता है, बिना किसी के जल्दबाजी या उनका आकलन किए। चाहे वह एक जटिल प्रवाह हो या एक बुनियादी सुविधा, वे किसी भी समय इसे फिर से देख सकते हैं। यह मेरे लिए भी मददगार है। मैं उन्हें ऐसी सुविधाएं सिखा सकता हूं जिनका उन्होंने पहले कभी उपयोग नहीं किया है, जैसे बैंक स्टेटमेंट डाउनलोड करना, वॉइस नोट भेजना या WhatsApp सेटिंग्स को समायोजित करना, वह भी कई मील दूर से।", 188 | "about.whyBuilt.p5": "मैंने इसे इसलिए बनाया ताकि मेरे माता-पिता थोड़ा अधिक आत्मविश्वास, थोड़ा अधिक स्वतंत्र, और तकनीक से थोड़ा कम डरें महसूस कर सकें। क्योंकि कभी-कभी, उन्हें अभ्यास करने के लिए बस एक सुरक्षित जगह की जरूरत होती है।", 189 | "about.whoAmI.title": "मैं कौन हूँ?", 190 | "about.whoAmI.p1": "मेरा नाम पंकज तंवर है। मैं रोजमर्रा की समस्याओं को हल करने के लिए सरल उपकरण बनाता हूँ।", 191 | "about.whoAmI.p2": "आप मुझे ट्विटर पर पा सकते हैं या मेरे अन्य प्रोजेक्ट्स देख सकते हैं।", 192 | "about.feedback.title": "प्रतिक्रिया", 193 | "about.feedback.p1": "यदि आपके पास सुझाव या प्रतिक्रिया है, तो मुझे सुनना अच्छा लगेगा।", 194 | "about.feedback.p2": "यह प्रोजेक्ट गिटहब पर ओपन-सोर्स है। कृपया मुझसे ट्विटर पर संपर्क करें या गिटहब पर मुद्दा उठाएं।" 195 | }, 196 | 197 | // PhonePe tutorial translations 198 | "phonepe": { 199 | "page.title": "PhonePe मनी ट्रांसफर ट्यूटोरियल - अपने माता-पिता को स्मार्टफोन सिखाएं", 200 | 201 | "tutorial.title": "PhonePe पर पैसे भेजना", 202 | "tutorial.completion": "बधाई हो! आपने PhonePe का उपयोग करके मोबाइल नंबर पर पैसे भेजना सफलतापूर्वक सीख लिया है।", 203 | 204 | "step1.instruction": "चरण 1: यह PhonePe होम स्क्रीन है। किसी को पैसे भेजने के लिए, मनी ट्रांसफर के अंतर्गत \"मोबाइल नंबर पर\" विकल्प पर टैप करें। यह आपको भारत में किसी भी फोन नंबर पर पैसे भेजने देता है।", 205 | "step2.instruction": "चरण 2: अब आप सेंड मनी स्क्रीन पर हैं। यहां आप अपने हाल के भुगतान देख सकते हैं। एक नया भुगतान करने के लिए, अपनी स्क्रीन के नीचे बैंगनी \"न्यू पेमेंट\" बटन पर टैप करें।", 206 | "step3.instruction": "चरण 3: अब आप एक संपर्क चुन सकते हैं। फोन नंबर दर्ज करने या किसी संपर्क को खोजने के लिए ऊपर दिए गए सर्च बॉक्स पर टैप करें।", 207 | "step4.instruction": "चरण 4: फोन नंबर टाइप करें या सूची से किसी संपर्क का चयन करें। जिस संपर्क को आप पैसे भेजना चाहते हैं, उस पर टैप करें।", 208 | "step5.instruction": "चरण 5: अब वह राशि दर्ज करें जो आप भेजना चाहते हैं। फिर आगे बढ़ने के लिए \"पे\" पर टैप करें। इसके बाद, लेनदेन को पूरा करने के लिए आपको अपना यूपीआई पिन दर्ज करना होगा।", 209 | 210 | "feedback.home": "अच्छा काम! अब आप सेंड मनी स्क्रीन देखेंगे।", 211 | "feedback.sendmoney": "बढ़िया! आपने न्यू पेमेंट का चयन किया है। अब आप संपर्क नंबर देखेंगे।", 212 | "feedback.selectcontact": "बढ़िया! आपने संपर्क नंबर दर्ज करने का विकल्प चुना है।", 213 | "feedback.searchcontact": "बढ़िया! नया भुगतान करने के लिए आपने संपर्क नंबर का चयन किया है।", 214 | "feedback.pay": "शानदार! इसके बाद, भुगतान पूरा करने के लिए बस अपना यूपीआई पिन दर्ज करें।", 215 | 216 | "completion.success": "भुगतान सफल!", 217 | "completion.message": "₹1 आशीष को भेजा गया" 218 | }, 219 | 220 | // WhatsApp tutorial translations 221 | "whatsapp": { 222 | "page.title": "WhatsApp वीडियो कॉल ट्यूटोरियल - अपने माता-पिता को स्मार्टफोन सिखाएं", 223 | 224 | "tutorial.title": "WhatsApp पर वीडियो कॉल करना", 225 | "tutorial.completion": "बधाई हो! आपने WhatsApp पर वीडियो कॉल करना सफलतापूर्वक सीख लिया है।", 226 | 227 | "step1.instruction": "चरण 1: यह आपकी WhatsApp चैट्स सूची है। यहां आपकी सभी बातचीत दिखाई देती है। वीडियो कॉल करने के लिए, पहले उस संपर्क पर टैप करें जिसे आप कॉल करना चाहते हैं। इस उदाहरण में, \"रैंडम आंटी\" पर टैप करें।", 228 | "step2.instruction": "चरण 2: अब आप चैट स्क्रीन पर हैं जहां आप इस संपर्क के साथ अपने संदेश देख सकते हैं। स्क्रीन के ऊपरी दाएं कोने को देखें। वीडियो कॉल शुरू करने के लिए वीडियो कैमरा आइकन पर टैप करें।", 229 | "step3.instruction": "चरण 3: आपका वीडियो कॉल अब कनेक्ट हो गया है! आप मुख्य स्क्रीन पर दूसरे व्यक्ति को और ऊपरी दाएं छोटी विंडो में खुद को देख सकते हैं। जब आप कॉल समाप्त करना चाहते हैं, तो स्क्रीन के निचले हिस्से में बीच में X वाले लाल बटन पर टैप करें।", 230 | 231 | "feedback.home": "अच्छा काम! अब आप इस संपर्क के लिए चैट स्क्रीन देखेंगे।", 232 | "feedback.chat": "बढ़िया! आपने वीडियो कॉल बटन पर क्लिक किया है। आपका कॉल कनेक्ट हो रहा है।", 233 | "feedback.call": "बहुत अच्छे! आपने लाल बटन दबाकर कॉल समाप्त कर दिया है।", 234 | 235 | "completion.success": "कॉल पूरा हुआ!", 236 | "completion.message": "आपने सफलतापूर्वक WhatsApp वीडियो कॉल किया है" 237 | } 238 | } 239 | 240 | // Add more languages here as needed 241 | }; 242 | 243 | // Cache for loaded translation files 244 | const translationCache = {}; 245 | 246 | // Initialize localization 247 | function initLocalization() { 248 | // Try to get language from localStorage 249 | const savedLanguage = localStorage.getItem('language'); 250 | 251 | // If not in localStorage, try to detect from browser 252 | if (!savedLanguage) { 253 | const browserLang = navigator.language.split('-')[0]; 254 | // Only use browser language if it's one we support 255 | if (LANGUAGES[browserLang]) { 256 | currentLanguage = browserLang; 257 | } 258 | } else { 259 | currentLanguage = savedLanguage; 260 | } 261 | 262 | // Set HTML lang attribute 263 | document.documentElement.lang = currentLanguage; 264 | document.documentElement.dir = LANGUAGES[currentLanguage].dir; 265 | 266 | // Create language selector if it doesn't exist 267 | if (!document.querySelector('.language-selector')) { 268 | createLanguageSelector(); 269 | } 270 | 271 | // Load page-specific translations 272 | const pageName = getPageName(); 273 | loadTranslations(pageName); 274 | } 275 | 276 | // Get current page name (for loading the right translation file) 277 | function getPageName() { 278 | const path = window.location.pathname; 279 | const filename = path.split('/').pop().replace('.html', '') || 'home'; 280 | 281 | if (filename === 'index' || filename === '') { 282 | return 'home'; 283 | } 284 | 285 | // Handle tutorial pages 286 | if (filename === 'phonepe-tutorial') { 287 | return 'phonepe'; 288 | } 289 | if (filename === 'whatsapp-tutorial') { 290 | return 'whatsapp'; 291 | } 292 | 293 | return filename; 294 | } 295 | 296 | // Create the language selector dropdown 297 | function createLanguageSelector() { 298 | const selectorContainer = document.createElement('div'); 299 | selectorContainer.className = 'language-selector'; 300 | 301 | const select = document.createElement('select'); 302 | select.id = 'language-select'; 303 | 304 | // Create options for each language 305 | Object.keys(LANGUAGES).forEach(langCode => { 306 | const option = document.createElement('option'); 307 | option.value = langCode; 308 | option.textContent = LANGUAGES[langCode].nativeName; 309 | option.selected = langCode === currentLanguage; 310 | select.appendChild(option); 311 | }); 312 | 313 | // Add event listener for language change 314 | select.addEventListener('change', (e) => { 315 | changeLanguage(e.target.value); 316 | }); 317 | 318 | selectorContainer.appendChild(select); 319 | 320 | // Add to the page header 321 | const header = document.querySelector('.container'); 322 | if (header) { 323 | header.insertBefore(selectorContainer, header.firstChild); 324 | } 325 | } 326 | 327 | // Change the current language 328 | function changeLanguage(lang) { 329 | if (LANGUAGES[lang] && lang !== currentLanguage) { 330 | currentLanguage = lang; 331 | localStorage.setItem('language', lang); 332 | 333 | // Update HTML lang attribute 334 | document.documentElement.lang = lang; 335 | document.documentElement.dir = LANGUAGES[lang].dir; 336 | 337 | // Load translations and update the page 338 | const pageName = getPageName(); 339 | loadTranslations(pageName); 340 | } 341 | } 342 | 343 | // Load translations for the current page 344 | function loadTranslations(pageName) { 345 | try { 346 | // Get translations from embedded object instead of fetch 347 | const commonTranslations = TRANSLATIONS[currentLanguage]["common"]; 348 | const pageTranslations = TRANSLATIONS[currentLanguage][pageName]; 349 | 350 | // Cache the translations 351 | translationCache[`${currentLanguage}_common`] = commonTranslations; 352 | translationCache[`${currentLanguage}_${pageName}`] = pageTranslations; 353 | 354 | // Combine common and page translations 355 | const translations = { 356 | ...commonTranslations, 357 | ...pageTranslations 358 | }; 359 | 360 | // Update all elements with data-i18n attribute 361 | updatePageTranslations(translations); 362 | 363 | } catch (error) { 364 | console.error('Error loading translations:', error); 365 | } 366 | } 367 | 368 | // Update all translatable elements on the page 369 | function updatePageTranslations(translations) { 370 | // Find all elements with data-i18n attribute 371 | const elements = document.querySelectorAll('[data-i18n]'); 372 | 373 | elements.forEach(element => { 374 | const key = element.getAttribute('data-i18n'); 375 | 376 | if (translations[key]) { 377 | // Handle different element types 378 | if (element.tagName === 'INPUT' && element.type === 'placeholder') { 379 | element.placeholder = translations[key]; 380 | } else if (element.tagName === 'IMG') { 381 | element.alt = translations[key]; 382 | } else { 383 | element.innerHTML = translations[key]; 384 | } 385 | } 386 | }); 387 | 388 | // Handle elements with data-i18n-attr (for translating attributes) 389 | const attrElements = document.querySelectorAll('[data-i18n-attr]'); 390 | attrElements.forEach(element => { 391 | const attrSpec = element.getAttribute('data-i18n-attr'); 392 | const [attrName, keyName] = attrSpec.split('='); 393 | 394 | if (attrName && keyName && translations[keyName]) { 395 | element.setAttribute(attrName, translations[keyName]); 396 | } 397 | }); 398 | 399 | // Update the page title 400 | if (translations['page.title']) { 401 | document.title = translations['page.title']; 402 | } 403 | } 404 | 405 | // Get translations for the current language and page 406 | function getTranslations() { 407 | const pageName = getPageName(); 408 | return { 409 | ...translationCache[`${currentLanguage}_common`] || {}, 410 | ...translationCache[`${currentLanguage}_${pageName}`] || {} 411 | }; 412 | } 413 | 414 | // Initialize when DOM is loaded 415 | document.addEventListener('DOMContentLoaded', initLocalization); 416 | 417 | // Export functions for use in other scripts 418 | window.localization = { 419 | changeLanguage, 420 | getCurrentLanguage: () => currentLanguage, 421 | getAvailableLanguages: () => LANGUAGES, 422 | getTranslations: getTranslations 423 | }; -------------------------------------------------------------------------------- /tutorials/whatsapp-tutorial.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WhatsApp Video Call Tutorial - Teach your parents smartphone 8 | 9 | 225 | 226 | 227 | 228 |
229 |

Making a Video Call on WhatsApp

230 |
231 |
232 |
233 |
234 |
235 | 236 | 237 |
238 | Step 1: This is your WhatsApp chats list. All your conversations appear here. To make a 239 | video call, first tap on the contact you want to call. In this example, tap on "Random Aunty". 240 |
241 | 242 |
243 | 244 |
245 | 246 | WhatsApp Contacts Screen 248 | 249 | 250 |
251 | 252 | 255 |
256 | 257 | 258 | 271 | 272 | 273 | 301 | 302 | 303 | 315 |
316 | 317 |
318 | Congratulations! You've successfully learned how to make a video call 319 | on WhatsApp. 320 |

321 | 323 | 324 |
325 | 326 |
327 | 328 | 329 | 330 | 331 |
332 | 333 | ← Back to Home 334 |
335 | 336 | 337 | 338 | 339 | 601 | 602 | 603 | --------------------------------------------------------------------------------