messagram_web/features.html at main · CodeHospital/messagram_web · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Features - Messagram</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="See everything Messagram can do: automatic SMS and missed-call forwarding, multi-SIM support, contact integration, custom filtering rules, and a reliability center.">
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <img src="images/logo.png" alt="Messagram Logo">
                <h1>Messagram</h1>
            </div>
            <nav>
                <button class="nav-toggle" type="button" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="primary-nav">
                    <span></span><span></span><span></span>
                </button>
                <ul id="primary-nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="features.html" class="active">Features</a></li>
                    <li><a href="how-it-works.html">How It Works</a></li>
                    <li><a href="download.html">Download</a></li>
                    <li><a href="reviews.html">Reviews</a></li>
                    <li><a href="privacy.html">Privacy Policy</a></li>
                    <li><a href="terms.html">Terms of Service</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="page-hero">
        <div class="container">
            <h2>Features</h2>
            <p>Everything Messagram does to keep your texts and calls within reach, wherever you are.</p>
        </div>
    </section>

    <section id="features" class="features">
        <div class="container">
            <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 incoming SMS messages and missed-call alerts 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 class="feature-card">
                    <div class="feature-icon">
                        <img src="images/feature-filters.svg" alt="Custom Filtering Rules">
                    </div>
                    <h3>Custom Filtering Rules</h3>
                    <p>Choose exactly which senders and keywords get forwarded with simple allow and block rules, so only the messages you care about reach Telegram.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <img src="images/feature-reliability.svg" alt="Reliability Center">
                    </div>
                    <h3>Reliability Center</h3>
                    <p>See when your last message was forwarded at a glance, and get device-specific guidance to stop battery optimization from silently pausing delivery.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="download">
        <div class="container">
            <h2>Ready to Get Started?</h2>
            <p>Download Messagram and connect your Telegram account in minutes.</p>
            <a href="download.html" class="btn primary">Download Now</a>
        </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="index.html">Home</a></li>
                        <li><a href="features.html">Features</a></li>
                        <li><a href="how-it-works.html">How It Works</a></li>
                        <li><a href="download.html">Download</a></li>
                        <li><a href="reviews.html">Reviews</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>Support: support@messagram.org</p>
                    <p>Privacy: privacy@messagram.org</p>
                    <p>Website: <a href="https://www.messagram.org">www.messagram.org</a></p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 Code Hospital. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>