Skip to content

Commit b6622ae

Browse files
AmitDas4321AmitDas4321
authored
Create index.html
1 parent fb77e6b commit b6622ae

1 file changed

Lines changed: 273 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>Sweepify — Telegram Group Guardian</title>
8+
<meta name="description" content="Sweepify keeps Telegram groups clean by auto-deleting abusive messages, optionally blocking promotional spam, and tidying join/left messages." />
9+
<meta name="theme-color" content="#0160BF" />
10+
11+
<style>
12+
:root{
13+
--brand:#0160BF;
14+
--brand2:#0ea5e9;
15+
--bg:#0b1220;
16+
--surface:#0e1528;
17+
--text:#e7eef8;
18+
--muted:#9fb2c7;
19+
--border:rgba(255,255,255,.09);
20+
--radius:16px;
21+
--shadow:0 10px 32px rgba(0,0,0,.35);
22+
--shadow-sm:0 6px 18px rgba(0,0,0,.25);
23+
--grad:radial-gradient(900px 600px at 8% 10%, rgba(1,96,191,.25), transparent 60%),
24+
radial-gradient(900px 600px at 88% 30%, rgba(14,165,233,.18), transparent 60%),
25+
linear-gradient(180deg, #0b1220, #0b1220);
26+
}
27+
*{box-sizing:border-box}
28+
html,body{margin:0}
29+
body{
30+
font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
31+
background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
32+
}
33+
a{color:inherit; text-decoration:none}
34+
.container{max-width:1120px; margin:0 auto; padding:0 20px}
35+
36+
/* NAV */
37+
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
38+
background:color-mix(in oklab, var(--surface) 82%, transparent); border-bottom:1px solid var(--border)}
39+
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:70px; gap:12px}
40+
.brand{display:flex; align-items:center; gap:.8rem}
41+
.logo{width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:var(--shadow-sm)}
42+
.brand-txt{display:flex; flex-direction:column; line-height:1.05}
43+
.brand-title{font-weight:800; letter-spacing:.2px}
44+
.brand-sub{font-size:.8rem; color:var(--muted)}
45+
.links{display:flex; align-items:center; gap:.5rem}
46+
.links a{padding:.6rem .8rem; border-radius:10px; color:var(--muted)}
47+
.links a:hover{background:rgba(255,255,255,.06); color:var(--text)}
48+
.btn{display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.05rem; border-radius:12px; font-weight:700;
49+
background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-sm); transition:.18s transform ease, .2s box-shadow ease}
50+
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
51+
.btn.secondary{background:transparent; color:var(--text); border:1px solid var(--border)}
52+
.toggle{display:none; width:40px; height:40px; border:1px solid var(--border); border-radius:10px; background:transparent; position:relative; cursor:pointer}
53+
.toggle span{position:absolute; left:9px; right:9px; height:2px; background:currentColor; border-radius:2px; transition:.2s}
54+
.toggle span:nth-child(1){top:12px} .toggle span:nth-child(2){top:19px} .toggle span:nth-child(3){top:26px}
55+
.toggle[aria-expanded="true"] span:nth-child(1){top:19px; transform:rotate(45deg)}
56+
.toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
57+
.toggle[aria-expanded="true"] span:nth-child(3){top:19px; transform:rotate(-45deg)}
58+
@media(max-width:900px){
59+
.toggle{display:block}
60+
.links{position:absolute; top:70px; left:0; right:0; display:grid; gap:6px; padding:14px 18px;
61+
background:color-mix(in oklab, var(--surface) 94%, transparent); border-bottom:1px solid var(--border);
62+
transform:translateY(-12px); opacity:0; pointer-events:none; transition:transform .2s, opacity .2s}
63+
.links.open{transform:translateY(0); opacity:1; pointer-events:auto}
64+
.links a{padding:1rem; border-radius:12px}
65+
.links .btn{width:100%; justify-content:center}
66+
}
67+
68+
/* HERO */
69+
.hero{background:var(--grad); border-bottom:1px solid var(--border); padding:80px 0 56px}
70+
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
71+
.hero h1{font-size:2.6rem; line-height:1.08; margin:0 0 .6rem}
72+
.hero p{color:var(--muted); font-size:1.08rem; margin:0 0 1.1rem}
73+
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
74+
.panel{
75+
min-height:320px; border-radius:16px; border:1px solid var(--border); background:
76+
radial-gradient(260px 240px at 70% 20%, rgba(14,165,233,.28), transparent 60%),
77+
radial-gradient(260px 240px at 25% 80%, rgba(1,96,191,.28), transparent 60%),
78+
linear-gradient(180deg, #0d152a, #0d152a);
79+
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.8rem; letter-spacing:.4px; box-shadow:var(--shadow-sm)
80+
}
81+
@media(max-width:960px){ .hero-grid{grid-template-columns:1fr} .hero h1{font-size:2.2rem} }
82+
83+
/* SECTION */
84+
section{padding:56px 0; border-bottom:1px solid var(--border)}
85+
.head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
86+
.muted{color:var(--muted)}
87+
.grid{display:grid; gap:16px}
88+
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
89+
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
90+
@media(max-width:960px){.grid.cols-3{grid-template-columns:1fr 1fr}}
91+
@media(max-width:720px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}
92+
93+
.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm); padding:16px}
94+
.pill{display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .65rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--muted); font-size:.86rem}
95+
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace; background:#0b1020; border:1px solid #1f2a44; border-radius:8px; padding:.18rem .45rem}
96+
97+
/* FOOTER */
98+
footer{padding:28px 0; color:var(--muted); text-align:center}
99+
footer a{color:#b9d9ff; text-decoration:underline}
100+
</style>
101+
</head>
102+
<body>
103+
104+
<!-- NAV -->
105+
<nav class="nav">
106+
<div class="container nav-inner">
107+
<a class="brand" href="#top" aria-label="Sweepify home">
108+
<div class="logo" aria-hidden="true"></div>
109+
<div class="brand-txt">
110+
<span class="brand-title">Sweepify</span>
111+
<span class="brand-sub">Telegram Group Guardian</span>
112+
</div>
113+
</a>
114+
115+
<button class="toggle" aria-expanded="false" aria-controls="navmenu" aria-label="Open menu">
116+
<span></span><span></span><span></span>
117+
</button>
118+
119+
<div id="navmenu" class="links">
120+
<a href="#features">Features</a>
121+
<a href="#how">How it works</a>
122+
<a href="#commands">Commands</a>
123+
<a class="btn" href="https://t.me/SweepifyBot?startgroup=true" target="_blank" rel="noopener">➕ Add to Group</a>
124+
</div>
125+
</div>
126+
</nav>
127+
128+
<!-- HERO -->
129+
<header class="hero" id="top">
130+
<div class="container hero-grid">
131+
<div>
132+
<h1>Keep your Telegram group clean &amp; safe 🛡️</h1>
133+
<p>Sweepify automatically removes abusive or harmful messages. You can optionally enable promotional spam deletion. It also tidies join/left messages and skips linked-channel forwards.</p>
134+
<div class="cta">
135+
<a class="btn" href="https://t.me/SweepifyBot?startgroup=true" target="_blank" rel="noopener">➕ Add to Group</a>
136+
<a class="btn secondary" href="https://t.me/PhoneInfoFamily" target="_blank" rel="noopener">🌐 Community</a>
137+
</div>
138+
</div>
139+
<div class="panel"><img src="https://raw.githubusercontent.com/AmitDas4321/Sweepify/main/assets/Sweepify%20Banner.gif" alt="Sweepify Banner"></div>
140+
</div>
141+
</header>
142+
143+
<!-- FEATURES (only what exists) -->
144+
<section id="features">
145+
<div class="container">
146+
<div class="head">
147+
<h2>Features</h2>
148+
<span class="pill">Requires: <span class="kbd">Delete messages</span> + <span class="kbd">Restrict members</span></span>
149+
</div>
150+
151+
<div class="grid cols-3">
152+
<div class="card">
153+
<div class="pill">🧼 Abuse filter</div>
154+
<h3 style="margin:.4rem 0 .3rem">Abusive/hate/profanity deletion</h3>
155+
<p class="muted">Automatically deletes messages containing profanity, hate speech, or abusive language.</p>
156+
</div>
157+
158+
<div class="card">
159+
<div class="pill">🧲 Optional</div>
160+
<h3 style="margin:.4rem 0 .3rem">Promotional spam toggle</h3>
161+
<p class="muted">You decide if promotions/ads should be deleted. Leave it off for open discussions.</p>
162+
</div>
163+
164+
<div class="card">
165+
<div class="pill">👋 Noise cleanup</div>
166+
<h3 style="margin:.4rem 0 .3rem">Join/left message removal</h3>
167+
<p class="muted">Silently removes the default “joined” and “left” notices to keep chats readable.</p>
168+
</div>
169+
170+
<div class="card">
171+
<div class="pill">🔗 Linked channel aware</div>
172+
<h3 style="margin:.4rem 0 .3rem">Skip channel forwards</h3>
173+
<p class="muted">Ignores automatic forwards and messages from a linked channel.</p>
174+
</div>
175+
176+
<div class="card">
177+
<div class="pill">🛡️ Role respect</div>
178+
<h3 style="margin:.4rem 0 .3rem">Admins are never auto-deleted</h3>
179+
<p class="muted">Creator/Administrators are not moderated by the bot.</p>
180+
</div>
181+
182+
<div class="card">
183+
<div class="pill">⚙️ Setup helper</div>
184+
<h3 style="margin:.4rem 0 .3rem">One-time permission reminder</h3>
185+
<p class="muted">If required rights are missing, Sweepify posts a one-time checklist message.</p>
186+
</div>
187+
</div>
188+
</div>
189+
</section>
190+
191+
<!-- HOW IT WORKS -->
192+
<section id="how">
193+
<div class="container">
194+
<div class="head">
195+
<h2>How it works</h2>
196+
<span class="pill">Takes ~30 seconds</span>
197+
</div>
198+
<div class="grid cols-2">
199+
<div class="card">
200+
<h3>1) Add &amp; make admin</h3>
201+
<p class="muted">Add <a href="https://t.me/SweepifyBot?startgroup=true" target="_blank" rel="noopener">@SweepifyBot</a> to your group and grant <span class="kbd">Delete messages</span> and <span class="kbd">Restrict members</span>.</p>
202+
</div>
203+
<div class="card">
204+
<h3>2) Type <span class="kbd">/start</span></h3>
205+
<p class="muted">Send once in the group. Sweepify confirms “Guardian active” and moderates quietly.</p>
206+
</div>
207+
</div>
208+
</div>
209+
</section>
210+
211+
<!-- COMMANDS (only what exists) -->
212+
<section id="commands">
213+
<div class="container">
214+
<div class="head">
215+
<h2>Commands</h2>
216+
<span class="pill">Simple by design</span>
217+
</div>
218+
<div class="grid cols-2">
219+
<div class="card">
220+
<h3>/start</h3>
221+
<p class="muted">Shows a short confirmation and enables protection in the group.</p>
222+
</div>
223+
<div class="card">
224+
<h3 class="muted">No extra commands</h3>
225+
<p class="muted">All moderation runs automatically in the background.</p>
226+
</div>
227+
</div>
228+
</div>
229+
</section>
230+
231+
<!-- FINAL CTA -->
232+
<section>
233+
<div class="container">
234+
<div class="card" style="display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px">
235+
<div>
236+
<div class="muted">Ready to tidy up your chats?</div>
237+
<h3 style="margin:.2rem 0 0">Add Sweepify to your Telegram group</h3>
238+
</div>
239+
<div>
240+
<a class="btn" href="https://t.me/SweepifyBot?startgroup=true" target="_blank" rel="noopener">➕ Add to Group</a>
241+
<a class="btn secondary" style="margin-left:8px" href="https://t.me/PhoneInfoFamily" target="_blank" rel="noopener">🌐 Community</a>
242+
</div>
243+
</div>
244+
</div>
245+
</section>
246+
247+
<!-- FOOTER -->
248+
<footer>
249+
<div class="container">
250+
© <span id="year"></span> Sweepify · Community: <a href="https://t.me/PhoneInfoFamily" target="_blank" rel="noopener">@PhoneInfoFamily</a> · Support: <a href="https://t.me/PhoneInfo_Helpbot" target="_blank" rel="noopener">@PhoneInfo_Helpbot</a>
251+
</div>
252+
</footer>
253+
254+
<script>
255+
// year
256+
document.getElementById('year').textContent = new Date().getFullYear();
257+
258+
// mobile menu
259+
const btn = document.querySelector('.toggle');
260+
const menu = document.getElementById('navmenu');
261+
if (btn && menu) {
262+
btn.addEventListener('click', () => {
263+
const open = btn.getAttribute('aria-expanded') === 'true';
264+
btn.setAttribute('aria-expanded', String(!open));
265+
menu.classList.toggle('open', !open);
266+
});
267+
menu.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {
268+
btn.setAttribute('aria-expanded', 'false'); menu.classList.remove('open');
269+
}));
270+
}
271+
</script>
272+
</body>
273+
</html>

0 commit comments

Comments
 (0)