-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
205 lines (197 loc) · 9.52 KB
/
index.html
File metadata and controls
205 lines (197 loc) · 9.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Messagram - SMS to Telegram Forwarding</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="images/logo.png" type="image/png">
<link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="description" content="Messagram forwards your SMS messages to Telegram, allowing you to access your text messages from anywhere.">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="images/logo.png" alt="Messagram Logo">
<h1>Messagram</h1>
</div>
<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#download">Download</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<div class="hero-content">
<h2>Never Miss an Important Text Message Again</h2>
<p>Messagram forwards your SMS messages to Telegram, allowing you to access your text messages from anywhere, on any device.</p>
<a href="#download" class="btn primary">Download Now</a>
</div>
<div class="hero-image">
<img src="images/hero-illustration.svg" alt="Messagram in action">
</div>
</div>
</section>
<section id="features" class="features">
<div class="container">
<h2>Features</h2>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">
<img src="images/feature-forward.svg" alt="Message Forwarding">
</div>
<h3>Automatic Forwarding</h3>
<p>Automatically forwards SMS messages to your Telegram account in real-time.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<img src="images/feature-multi-sim.svg" alt="Multi-SIM Support">
</div>
<h3>Multi-SIM Support</h3>
<p>Works with dual SIM phones, allowing you to forward messages from both SIM cards.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<img src="images/feature-contacts.svg" alt="Contact Integration">
</div>
<h3>Contact Integration</h3>
<p>Shows contact names instead of just phone numbers for a better messaging experience.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<img src="images/feature-secure.svg" alt="Secure">
</div>
<h3>Secure Connection</h3>
<p>Connects securely to your Telegram account through Telegram's official bot API.</p>
</div>
</div>
</div>
</section>
<section id="how-it-works" class="how-it-works">
<div class="container">
<h2>How It Works</h2>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h3>Install Messagram</h3>
<p>Download and install Messagram from the Google Play Store.</p>
<img src="images/step1-screenshot.svg" alt="Install Messagram">
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h3>Connect to Telegram</h3>
<p>Tap "Connect to Telegram" and follow the instructions to connect with the Messagram bot.</p>
<img src="images/step2-screenshot.svg" alt="Connect to Telegram">
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h3>Grant Permissions</h3>
<p>Grant the necessary permissions for SMS access and contacts (optional).</p>
<img src="images/step3-screenshot.svg" alt="Grant Permissions">
</div>
</div>
<div class="step">
<div class="step-number">4</div>
<div class="step-content">
<h3>Start Receiving Messages</h3>
<p>That's it! Your SMS messages will now be forwarded to your Telegram account.</p>
<img src="images/step4-screenshot.svg" alt="Receive Messages">
</div>
</div>
</div>
</div>
</section>
<section id="download" class="download">
<div class="container">
<h2>Get Messagram</h2>
<p>Get Messagram now<br />never miss an important text message ever again!</p>
<div class="download-buttons">
<a href="https://play.google.com/store/apps/details?id=org.messagram.app" target="_blank" class="btn download-btn">
<img src="images/GetItOnGooglePlay.svg" alt="Get It On Google Play">
</a>
</div>
</div>
</section>
<!-- section for reviews -->
<section id="reviews" class="reviews">
<div class="container">
<h2>What Users Say</h2>
<div class="feature-grid">
<div class="feature-card">
<p>"Messagram has been a lifesaver! I can now read my SMS messages on my tablet while my phone is charging in another room."</p>
<p><strong>- Sarah M.</strong></p>
</div>
<div class="feature-card">
<p>"Simple setup and works flawlessly. I never miss important verification codes anymore when I'm working on my computer."</p>
<p><strong>- James T.</strong></p>
</div>
<div class="feature-card">
<p>"The dual SIM support is perfect for me. I can keep track of both my personal and work messages in one place."</p>
<p><strong>- Michael R.</strong></p>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-links">
<div class="footer-logo">
<img src="images/logo.png" alt="Messagram Logo">
<h3>Messagram</h3>
</div>
<a href="https://play.google.com/store/apps/details?id=org.messagram.app" target="_blank">
<img src="images/GetItOnGooglePlay.svg" alt="Get It On Google Play">
</a>
</div>
<div class="footer-links">
<h4>Links</h4>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#download">Download</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms of Service</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contact</h4>
<p>Email: support@messagram.org</p>
<p>Website: <a href="https://www.messagram.org">www.messagram.org</a></p>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Code Hospital. All rights reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>